Question

我在“顶级”<li>上有一个点击处理程序，我想隐藏<li>下面的所有内容，然后显示特定<li>下方的内容点击了。

隐藏起作用，但显示不起作用。

$('.menu li').click(function() {
  $('.submenu').hide();
  var myclass = $('submenu');
  $(this).show($submenu)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button>Menu</button>
  <ul class="menu">
    <li><a href="#">Football</a>
    </li>
    <li><a href="#">cricket</a>
      <ul class="submenu">
        <li><a href="#">Shane</a>
        </li>
        <li><a href="#">Waqar</a>
        </li>
        <li><a href="#">Waseem</a>
        </li>
        <li><a href="#">Akhtar</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Hockey</a>
    </li>
    <li><a href="#">Baseball</a>
      <ul class="submenu">
        <li><a href="#">Shane</a>
        </li>
        <li><a href="#">Waqar</a>
        </li>
        <li><a href="#">Waseem</a>
        </li>
        <li><a href="#">Akhtar</a>
        </li>
      </ul>
    </li>
    <div class="clear"></div>
  </ul>
</div>

Answer 1

试试这个。

它用CSS隐藏子菜单然后，当您单击列表项时，它会切换子菜单。

如果您只想一次显示一个子菜单，请取消注释js中的行。

$('.menu li').has('.submenu').click(function(e) {
  e.preventDefault();
  $(this).find('.submenu').slideToggle();
});

.submenu {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button>Menu</button>
  <ul class="menu">
    <li><a href="#">Football</a></li>
    <li><a href="#">cricket</a>
      <ul class="submenu">
        <li><a href="#">Shane</a></li>
        <li><a href="#">Waqar</a></li>
        <li><a href="#">Waseem</a></li>
        <li><a href="#">Akhtar</a></li>
      </ul>
    </li>
    <li><a href="#">Hockey</a></li>
    <li><a href="#">Baseball</a>
      <ul class="submenu">
        <li><a href="#">Shane</a></li>
        <li><a href="#">Waqar</a></li>
        <li><a href="#">Waseem</a></li>
        <li><a href="#">Akhtar</a></li>
      </ul>
    </li>
    <div class="clear"></div>
  </ul>
</div>

Answer 2

你应该试试这个。

＆＃13;

if (customPanel != null) // doesn't work, the same error

＆＃13;

Answer 3

你正在使用jQuery并且有toggle()函数用于显示/隐藏切换并像这样使用

    $('.submenu').toggle();

我修复了无效的脚本。

$('.menu li').click(function(){
  $('.submenu').hide();
  $(this).find('.submenu').show();
});

<强> Working fiddle

使用jQuery的.show（）显示内容时出现问题

3 个答案: