Question

我正在使用手风琴菜单。单击它后不是向上滑动，第二个菜单在加载时总是向上滑动。我想改变它。当点击时，它应该详细说明子菜单。我不知道怎么做。这是我的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;
}

请帮我怎么做

Answer 1

我正在做类似的事情，这就是我从我正在使用的代码中提取的内容。

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>

手风琴菜单不正常

1 个答案: