Question

我的菜单中有以下代码。我想在点击"ts-dropdown"时显示"nav-menu a"。我想在"ts-dropdown"上显示相关菜单。如何使用javascript或jquery执行此操作。

注意：适用于移动设备

<ul class="nav-menu">
    <li><a href="#">Home</a>
        <ul class="ts-dropdown" id="ts-drop1">
            <li><a href="index.php">Home Basic</a></li>
            <li><a href="home-advanced.php">Home Advanced</a></li>
            <li><a href="home-corporate.php">Home Corporate</a></li>
            <li><a href="home-Business.php">Home Business</a></li>
            <li><a href="home-commerce.php">Home E-Commerce</a></li>
            <li><a href="home-onepage.php">Home One Page</a></li>
        </ul>
    </li>
    <li><a href="#">Pages</a>
        <ul class="ts-dropdown" id="ts-drop1">
            <li><a href="about-us.php">About Us</a></li>
            <li><a href="services.php">Our Services</a></li>
            <li><a href="404.php">404</a></li>
            <li><a href="pricing.php">pricing</a></li>
         </ul>
     </li>

Answer 1

你的意思是这样的：

$(".nav-menu > li > a").click(function(event) {
    event.preventDefault(); // Prevent the click from following the link
    $(this).parent().find(".ts-dropdown").show(); // Display the .ts-dropdown under the link that was clicked
});

更新

显示点击的菜单并隐藏其余部分：

$(document).ready(function($) {
$(".nav-menu > li > a").click(function(event) {
    event.preventDefault(); // Prevent the click from following the link
    $(".nav-menu .ts-dropdown").hide(); // Hide all menus
    $(this).parent().find(".ts-dropdown").toggle(); // Display the .ts-dropdown under the link that was clicked
});
});

切换点击的菜单并隐藏其余部分：

$(document).ready(function($) {
$(".nav-menu > li > a").click(function(event) {
    event.preventDefault(); // Prevent the click from following the link
    $showObj = $(this).parent().find(".ts-dropdown");
    $(".nav-menu .ts-dropdown").each(function() {
        if ($showObj.get(0) === $(this).get(0)) {
            $(this).toggle();
        } else {
            $(this).hide();
        }
    });
});
});

Answer 2

所以如果我没有弄错你，我会在Javascript之前使用bootstrap的下拉菜单系统。看看这个 http://getbootstrap.com/components/#navbar

否则，如果你真的想使用JS。首先将该链接更改为按钮

 .ts-dropdown{
   display: none;
  }

Jquery的：

$(".nav-menu button").click(function(){
    $(this).find(".ts-dropdown").css("display", "inline");
  }

会部分解决您的问题。如果你想添加一些其他的动画

想要显示相关菜单项onclick

2 个答案:

更新