Question

当我点击它时，我想要“突出显示”一些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; }

关于我如何有意义地提出这个问题的任何想法都会非常感激，因为我无法看清我做错了什么：/

Answer 1

我将jquery稍微整理一下：jsfiddle

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

Jquery的：

$(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;}

ToggleClass不起作用

1 个答案: