手风琴菜单无法正常工作

accordion menu not working properly

本文关键字：工作 常工作 菜单 手风琴      更新时间：2023-09-26

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

请帮我怎么做

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

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>
相关文章：