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

但看起来您的代码正在运行。除非有你没有提到的东西

查询：

$(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 回答