Question

我想在点击<a href="#"></a>时显示/隐藏我的子菜单。这是一个代码示例：

<ul>
    <li><a href="www.example.com">Test</a></li>
    <li><a href="www.example.com">Test</a></li>
    <li class="submenu">
        <a href="#">Test 2</a>
        <ul class="ul_submenu">
            <li><a href="www.example.com">Test</a></li>
            <li><a href="www.example.com">Test</a></li>
            <li class="submenu_2">
                <a href="#">Test 3</a>
                <ul class="ul_submenu_2">
                    <li><a href="www.example.com">Test</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

$( 'li.submenu a[href="#"]').click(function(e) {
    e.preventDefault();
    $("ul.ul_submenu").css("display","block");
}, function() {
    $("ul.ul_submenu").css("display","none");
});

您可以找到JSFiddle。

当有子元素时，我需要允许点击标签，并修改li的显示。但是当用户点击这样的标记时，我需要取消页面重新加载：<a href="#"></a>

Answer 1

你可以，

$('li a').click(function(e) {
  e.preventDefault();
  $(this).closest("li").find("[class^='ul_submenu']").slideToggle();
});

Fiddle

Answer 2

只需在点击回调中返回false即可。并且click()只有一个回调函数，而不是两个。你的计划是什么？

您不需要使用css()，只需使用show()。

$(function() {
    $('li.submenu a[href="#"]').click(function(e) {
        e.preventDefault();
        $("ul.ul_submenu").show()
        return false;
    });
});

你应该更加动态。对于所有菜单条目，这样的Somhow。我编辑了你的小提琴：https://jsfiddle.net/sy757gvj/5/

<ul>
  <li><a href="www.example.com">Test</a></li>
  <li><a href="www.example.com">Test</a></li>
  <li class="submenu"><a href="#">Test 2</a>
    <ul class="ul_submenu">
      <li><a href="www.example.com">Test</a></li>
      <li><a href="www.example.com">Test</a></li>
      <li class="submenu"><a href="#">Test 3</a>
        <ul class="ul_submenu">
          <li><a href="www.example.com">Test</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

-

$(function() {
    $('li.submenu a[href="#"]').click(function(e) {
        e.preventDefault();
        $(this).next().toggle();
        return false;
    });
});

Answer 3

您可以使用toggle功能。

$(document).ready(function(){
    $('li.submenu a[href="#"]').click(function(){
        $("ul.ul_submenu").toggle();
    });
});

Answer 4

此代码将打开＆＃34; Test2＆＃34;子菜单：

＆＃13;

$('li.submenu a[href="#"]').click(function(e) {
   e.preventDefault();
   $(this).parent().children("ul.ul_submenu").show();
});

＆＃13;

.ul_submenu {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="www.example.com">Test</a></li>
  <li><a href="www.example.com">Test</a></li>
  <li class="submenu"><a href="#">Test 2</a>
    <ul class="ul_submenu">
      <li><a href="www.example.com">Test</a></li>
      <li><a href="www.example.com">Test</a></li>
      <li class="submenu_2"><a href="#">Test 3</a>
        <ul class="ul_submenu_2">
          <li><a href="www.example.com">Test</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 5

我将你的jquery改为：

#include <thread> #include <iostream> bool cancelled = false; bool finished = false; void thread1() { while(!cancelled) { std::cout << "Not cancelled"; } } int main() { std::thread t(thread1); t.detach(); cancelled = true; while(!finished) {} }

它似乎有效。小提琴：https://jsfiddle.net/y0p13dt7/1/

显示/隐藏ul li onclick jquery

5 个答案: