0

クリックしたときに「ハイライト」したい HTML があります。かなり簡単なことですが、私の人生ではtoggleClassを機能させることはできません:/

HTMLは次のとおりです。

<div id="mainContent">
    <div id="pageTop">
        ...
    </div>

    <div id="content">
        <h2>2 Special Offers</h2>
        <p>1) Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p>
      <div id="prod1">
            <img src="images/prod1-1.png" width="130" height="109" alt="">
        </div>

        <div id="prod2">
            <div id="holdingBox1" class="one">
                <p>Choose from over 32 products</p>
            </div>
        </div>

        <div id="prod3">
            <div id="holdingBox2" class="two">
                <p>Choose from over 32 products</p>
            </div>
        </div>
    </div>

    <div class="flyout1">
        <div id="subProd">Prod 1</div>
        <div id="subProd">Prod 2</div>
        <div id="subProd">Prod 3</div>
        <div id="subProd">Prod 4</div>
        <div id="subProd">Prod 5</div>
        <div id="subProd">Prod 6</div>
        <div id="subProd">Prod 7</div>
        <div id="subProd">Prod 8</div>
    </div>

    <div class="flyout2">
        <div id="subProd">Prod 1</div>
        <div id="subProd">Prod 2</div>
        <div id="subProd">Prod 3</div>
        <div id="subProd">Prod 4</div>
        <div id="subProd">Prod 5</div>
        <div id="subProd">Prod 6</div>
        <div id="subProd">Prod 7</div>
        <div id="subProd">Prod 8</div>
    </div>

    <div id="restOfPage">
    ...
    </div>
</div>

ここにjQueryがあります：

$(document).ready(function() {
$('.flyout1').hide();
$("#holdingBox1").on("click",function(){
    $(this).toggleClass("hover");
    $(".flyout1").slideToggle();
    $(".flyout2").hide();
});
$('.flyout2').hide();
$("#holdingBox2").on("click",function(){
    $(this).toggleClass("hover");
    $(".flyout2").slideToggle();
    $(".flyout1").hide();
}); });

私の隠しレイヤーのslideToggleはうまく機能しますが、他の機能を追加するとうまくいかないようです:/

これが、適用しようとしているCSS「ホバー」です

.hover { border:1px solid red; }

私がこれをどのように途方もなくクックしたかについてのアイデアは、私が間違っていることを見ることができないので、大歓迎です:/

4

1 に答える 1

1

私はあなたjqueryを少し片付けました：jsfiddle

しかし、あなたのコードは機能しているようです。あなたが言及していないことがない限り

Jクエリ:

$(document).ready(function() {
$("#holdingBox1").on("click",function(){
    $(this).toggleClass("hover");
    $(".flyout1").slideToggle();
    $(".flyout2").hide();
});

$("#holdingBox2").on("click",function(){
    $(this).toggleClass("hover");
    $(".flyout2").slideToggle();
    $(".flyout1").hide();
}); });

CSS

.hover { border:1px solid red; }
.flyout1{display:none;}
.flyout2{display:none;}
于 2013-04-15T10:40:59.523 に答える