0

みなさん、良い一日を！

次の問題があります: ある製品のメニューと別の製品の別のメニューがあります。次のようになります。

製品1 | 製品2

ホーム オプション1 オプション2 オプション3 | オプション1 オプション2 オプション3

ここで、最初の 3 つのオプションは Product1 用で、最後の 3 つのオプションは Product2 用です。1 つの製品のメニューのみを表示する必要があります。

私の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");
    });

ただし、最初の 2 行も実行します。

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

そして、#product1 と #product2 の両方をアクティブにし、両方のメニューを非表示にします。何か案は？前もって感謝します！

4

2 に答える 2

0

簡単な答え:関数に追加する必要がありreturn falseます。

追加情報:

スクリプトの開始時には、次のものがあります。

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

product1これらのプロパティを HTML または CSS のどこかに割り当てて、activeクラスなどを指定する傾向があります。

最後に、jQuery Accordion または Tabstrip コンポーネントを使用することだけを検討しましたか?

http://jqueryui.com/accordion/

于 2013-08-01T14:18:48.157 に答える
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 に答える