Question

我有一个相当简单的工作脚本，显示和隐藏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>

Answer 1

你想创作手风琴吗？

<强> 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;
});

Answer 2

你的意思是???

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

<p id="myP">hello</p>
<div class="myDiv">hello</div>

Answer 3

将div更改为.div或更好，减少混淆并使其更具人性化：

.hideableDiv {

display:none;

width:400px;

height:200px;

background:#f5f5f5;

}

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

本质上是你的

<div class="div">

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

通过修改我建议你的div将成为

<div class="hideableDiv">

这将使您的jQuery选择器：

$(".hideableDiv")

Answer 4

我不确定这是你想要的，但是看着你的小提琴，p不能在div中，因为你的css设置所有div显示：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/

隐藏/显示div，如何在脚本中更改标记

4 个答案: