Question

大家好日子！

我遇到以下问题：我有一个产品的菜单和另一个产品的另一个菜单。它是这样的：

产品1 |产品2

Home Option1 Option2 Option3 |选项1选项2选项3

其中前3个选项适用于Product1，后3个选项适用于Product2。我只需要查看一个产品的菜单。

我的HTML像这样（当然简化）：

<div class="products">
<a href="#" id="product1">Product1</a>
<a href="#" id="product2">Product2</a>
</div>
<ul id="menu1">
<li>Option1</li>
<li>Option2</li>
<li>Option3</li>
</ul>
<ul id="menu2">
<li>Option1</li>
<li>Option2</li>
<li>Option3</li>
</ul>

jQuery就像这样：

$(document).ready( function() {
    $("#product1").addClass("active");
    $("#menu2").hide();

    $("#product2").click(function () {
         $("#menu1").hide();
         $("#menu2").show();
         $("#product1").removeClass("active");
         $("#product2").addClass("active");
    });
    $("#product1").click(function () {
         $("#menu2").hide();
         $("#menu1").show();
         $("#product2").removeClass("active");
         $("#product1").addClass("active");
    });
 });

问题：当我第一次加载页面时，一切正常。例如，当我点击＃product2时，它会执行函数中指定的所有内容：

 $("#product2").click(function () {
         $("#menu1").hide();
         $("#menu2").show();
         $("#product1").removeClass("active");
         $("#product2").addClass("active");
    });

但它也执行前两行：

    $("#product1").addClass("active");
    $("#menu2").hide();

我同时激活＃product1和#product2，并且隐藏了两个菜单。有任何想法吗？提前谢谢！

Answer 1

您应该通过返回false来阻止点击事件的默认操作。这样，您的页面就不会重新加载。

这样的事情可以解决问题：

$(document).ready(function () {
    $("#product1").addClass("active");
    $("#menu2").hide();

    $("#product2").click(function () {
        $("#menu1").hide();
        $("#menu2").show();
        $("#product1").removeClass("active");
        $("#product2").addClass("active");
        return false;
    });
    $("#product1").click(function () {
        $("#menu2").hide();
        $("#menu1").show();
        $("#product2").removeClass("active");
        $("#product1").addClass("active");
        return false;
    });
});

Answer 2

简答：您需要在功能中添加return false。

额外信息：

在脚本开头，您有以下内容：

$("#product1").addClass("active");
$("#menu2").hide();

我倾向于在HTML或CSS中的某处分配这些属性，以便product1具有active类等。

最后，您是否考虑过使用jQuery Accordion或Tabstrip组件？

http://jqueryui.com/accordion/

jQuery隐藏/显示2个菜单

2 个答案: