0

アコーディオンメニューを使用しています。クリックした後に上にスライドする代わりに、2番目のメニューはロードされると常に上にスライドします。変えたい。クリックすると、サブメニューが表示されます。私はそれを行う方法を取得していません。これがjsの私のコードです

function initMenu() {
    $('#menu ul').hide();
    $('#menu ul:first').show();

    $('#menu li a').click(function() {
        var checkElement = $(this).next();

        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            return true;
        }

        if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#menu ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
            return false;
        }
    });
}

$(document).ready(function() {
    initMenu();
});

ここに私のcssがあります

#menu{
    font-family:'Open Sans';
    font-size:13px;
    text-align:center;

text-transform:uppercase;
line-height:15px;
width:250px;
font-weight:bold;




}
ul#menu, ul#menu ul {

  list-style-type:none;
  margin: 0;
  padding: 0;
  padding-top:5px;
  padding-bottom:0px;
  width: 15em;
  background:url(images/button_menu.png) no-repeat;
  line-height:15px;
}

ul#menu a {
  display: block;
  text-decoration: none;    
}

ul#menu li {
  margin-top: 1px;
}

ul#menu li a {

  line-height:15px;
  text-transform:uppercase;
  color: #fff;  
  padding: 0.5em;
  line-height:20px;

}

ul#menu li a:hover {

  background:url(images/button_menu_hover.png) no-repeat;
}

ul#menu li ul li a {
  background:#F7F7F7;
  color: #000;
  padding-top: 3px;
  padding-bottom: 3px;
  line-height: 14px;

  padding-left: 10px;
   border-bottom:0px;
   line-height:20px;

}

ul#menu li ul li a:hover {
  background:url(images/button_menu_hover.png) no-repeat;
  border-left: 5px #006600 solid;
  padding-left: 10px;
  color:#fff;
}

それを行う方法を教えてください

4

1 に答える 1

0

私は似たようなことをしていますが、これは私が使用しているコードから引き出したものです。

instance.$el.find('li.st-open').each( function() {
var $this   = $(this);
$this.css( 'height', $this.data( 'originalHeight' ) + $this.find('div.st-content').outerHeight( true ) );
});

css は次のとおりです。

.st-accordion ul li.st-open > a{
margin-top:70px;
}
.st-accordion ul li{
height:auto;
}
.st-accordion ul li > a span{
 visibility:hidden;
}

そしてhtmlは次のとおりです。

<div id="st-accordion" class="st-accordion">
   <ul>
      <li><a href="#"><h2>Title 1</h2></a>
          <div class="st-content">
            <p>Content goes here.</p>
          </div>
      </li>
      <li><a href="#"><h2>Title 2</h2></a>
          <div class="st-content">
            <p>Content goes here.</p>
          </div>
      </li>
  </ul>
</div>
于 2012-07-10T18:46:02.437 に答える