0

今天是个好日子！

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

产品1 | 产品2

首页 选项1 选项2 选项3 | 选项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 都处于活动状态，并且两个菜单都被隐藏了。有任何想法吗？提前致谢！

4

2 回答 2

0

您应该通过返回 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;
    });
});
于 2013-08-01T14:15:26.657 回答
0

简短的回答：您需要添加return false到您的功能。

额外信息：

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

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

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

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

http://jqueryui.com/accordion/

于 2013-08-01T14:18:48.157 回答