Question

我希望菜单能够像这样工作。当您单击Main1时，它将变为活动状态，并且列表将显示，当您再次单击它时，列表将隐藏。当Main1处于活动状态且单击Main2时，Main1应处于非活动状态且Main2处于活动状态。但我的Javascript似乎并没有使它运作良好。当您单击Main2时，它会使Main1处于非活动状态，而如果您单击任何活动的Main，它将不会变为非活动状态。请帮忙

    <div class="directory-section-list">
    <ul  class="list_item">
            <li class="li_lvl lvl0" id="bx_1847241719_2">Main1</li>
              <ul>
            <li class=""><span class="li_lvl lvl1">1.5-4.5</span>
              <ul>
            <li><a href="/directory/autoloader/1-1-8-tons/fd-15/58-fd-15.html">FD 15</a></li>
            <li><a href="/directory/autoloader/1-1-8-tons/fd-18/59-fd-18.html">FD 18</a></li>
              </ul>
              </ul>

     <ul  class="list_item">
            <li class="li_lvl lvl0" id="bx_1847241719_2">Main2</li>
              <ul>
            <li class=""><span class="li_lvl lvl1">1.5-4.5</span>
              <ul>                          
           <li><a href="/directory/autoloader/1-1-8-tons/fd-15/58-fd-15.html">FD 15</a></li>
           <li><a href="/directory/autoloader/1-1-8-tons/fd-18/59-fd-18.html">FD 18</a></li>
          </ul>
              </ul >
             </div>

的Javascript

$(' .list_item .lvl0').click(function(){
    $(".list_item.active").removeClass("active");
    $(this).parent().toggleClass('active');
});

$(' .list_item .lvl1').click(function(){
    $(this).parent().toggleClass('active');
});

Answer 1

试试这个，

$('.list_item .lvl0').click(function(){
 $('.directory-section-list .active').removeClass('active');
  
 if ($(this).parent().hasClass('active'))
 {
  $(this).parent().removeClass('active');
 }
 else
 {
  $(this).parent().addClass('active');
 } 
});

$('.list_item .lvl1').click(function(){
  $(this).parent().toggleClass('active');
});

Answer 2

请试试这个

HTML

<div class="directory-section-list">
    <ul class="list_item">
        <li class="li_lvl lvl0" id="bx_1847241719_2">Main1</li>
        <ul>
            <li class=""><span class="li_lvl lvl1">1.5-4.5</span>
                <ul>
                    <li><a href="/directory/autoloader/1-1-8-tons/fd-15/58-fd-15.html">FD 15</a></li>
                    <li><a href="/directory/autoloader/1-1-8-tons/fd-18/59-fd-18.html">FD 18</a></li>
                </ul>
        </ul>
    </ul>
    <ul class="list_item">
        <li class="li_lvl lvl1" id="bx_1847241719_2">Main2</li>
        <ul>
            <li class=""><span class="li_lvl lvl1">1.5-4.5</span>
                <ul>
                    <li><a href="/directory/autoloader/1-1-8-tons/fd-15/58-fd-15.html">FD 15</a></li>
                    <li><a href="/directory/autoloader/1-1-8-tons/fd-18/59-fd-18.html">FD 18</a></li>
                </ul>
        </ul>
    </ul>
</div>

Java脚本

$(' .list_item .lvl0').click(function () {
   $(' .list_item .lvl1').parent().removeClass("active");
   $(this).parent().toggleClass('active');
});

$(' .list_item .lvl1').click(function () {
   $(' .list_item .lvl0').parent().removeClass("active");
   $(this).parent().toggleClass('active');
});

Answer 3

我想你想要这样的东西？

$(document).ready(function(){
  	$('.maindiv').hide();
	
	$( "button" ).click(function() {
		$('.maindiv[data-link=' + $(this).data('link') + ']').toggle("fade",300);
	});
});

div {
	background-color: green;
	color: white;
	width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<button class="show" data-link="main1">Main1</button>
<button class="show" data-link="main2">Main2</button>
<div>
	<div class="maindiv" data-link="main1">
	 	<h1>This is main1</h1>
	</div>
	<div class="maindiv" data-link="main2">
	  <h1>This is main2</h1>
	</div>
</div>

Answer 4

很抱歉，您的HTML列表有几处错误

<li class=""><span class="li_lvl lvl1">1.5-4.5</span>

永远不会被关闭......

全部关于HTML结构 - 我做了另一个改变 - ＆gt;检查这个JS小提琴的HTML结构：http://jsfiddle.net/marco_rensch/hzu76hgt/32/

Answer 5

谢谢大家的帮助。我设法做了一些你的例子并让它以我自己的方式工作。再次感谢你。我将发布Javascript修复程序。

$(document).ready(function() {
          $('.li_lvl').click(function () {

            if ($(this).parent().hasClass('active')) {
                $(this).parent().removeClass('active');
            }
            else {
               $('.directory-section-list .active').removeClass('active');
                $(this).parent().addClass('active');
            }
        });

这将切换父.li_lvl的活动类，即ul.list_item。如果父类具有活动类，则它将删除活动类。如果任何其他list_item在您单击另一个list_item时将激活类，它将删除另一个list_item上的活动类，并在您单击的list_item上激活类。

toggleclass active无法正常工作

5 个答案: