1

我有一个相当简单的工作脚本，它显示和隐藏一个 div。

问题是我无法将标签设置为 ID 或类，目前它被设置为不是我想要的元素选择器。我可以在这个 JS 中更改什么将允许我将其设置为我可以在单击时显示/隐藏的类。小提琴http://jsfiddle.net/dXWAY/2/

$("p").click(function () {
    $("div").slideToggle("slow");
})

p {

    border:0 none;

    font-size:2em;

    background:transparent;

}

div {

    display:none;

    width:400px;

    height:200px;

    background:#f5f5f5;

}

<p>hello</p>
<div class="div">hello</div>
4

4 回答 4

2

你想创造一架手风琴吗？

jsFiddle

<div id="portfolio">
    <div class="portfolio-img">
        <a class="toggleBtn">Click Me!</a>
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore accusamus porro modi ut itaque ipsum natus explicabo vero sequi beatae libero voluptatibus sit culpa debitis tempore! Sint eum ipsum consequatur!</div>
    </div>
</div>

#portfolio {
    background: none repeat scroll 0 0 #EEEEEE;
    border-radius: 10px 10px 10px 10px;
    float: left;
    width: 200px;
}

#portfolio .portfolio-img {
    width:100%;
    background:#ccc;  
    overflow:hidden;
    float:left;
    clear:left;    
}

.toggleBtn {
    background:deepskyblue;
    display:block;
    float:Left;
    width:100%;
    padding:10px;
    border-bottom:1px solid #ccc;
    border-top:1px solid #fff;
    color:#fff;
    cursor:pointer;
}

.content {
    background:skyblue; 
    float:left;
    overflow:hidden;
    width:100%;
    padding:10px;
}

$('.content').hide();

$('.toggleBtn').on('click', function() {
    $(this).next('.content').slideToggle();
    return false;
});
于 2013-08-23T21:19:45.837 回答
1

你的意思是？？？

$("#myP").click(function () {
    $("#myDiv").slideToggle("slow");
})

<p id="myP">hello</p>
<div class="myDiv">hello</div>
于 2013-08-23T21:06:48.893 回答
1

将 div 更改为 .div 或更好，减少混淆并使其更易于阅读：

.hideableDiv {

display:none;

width:400px;

height:200px;

background:#f5f5f5;

}

哪里。指定这是一个类的名称。

本质上你的

<div class="div">

没有应用一个类，因为你的css中的“div”意味着将它应用于所有div元素。

通过修改，我建议您的 div 将变为

<div class="hideableDiv">

这将使您的 jQuery 选择器：

$(".hideableDiv")
于 2013-08-23T21:07:55.457 回答
0

我不确定这是你想要的，但看看你的小提琴，p 不能在 div 中，因为你的 css 将所有 div 设置为 display:none。

<div id="portfolio">
    <div class="portfolio-img">

        <div class="div">hello</div>>
    </div>
</div>

<p>hello</p>

正如所提到的诡计，最好将您的 display:none 分配给一个类而不是所有 div 元素。

看这里

http://jsfiddle.net/jboneca/dXWAY/4/

于 2013-08-23T21:09:59.903 回答