隱藏/顯示div，如何更改腳本內的標記

我有一個相當簡單的工作腳本，顯示和隱藏div。隱藏/顯示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>

來源

2013-08-23 benny

你永遠不能點擊'p'因爲'顯示：none'上'div' –

你想要做的事。我不明白你的問題。 – putvande

你的意思是？

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

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

來源

2013-08-23 21:06:48 Newben

是的，除了我將它設置爲類。 – benny

更改div來.div或更好，但不那麼混亂，使其更可讀：

.hideableDiv { 

display:none; 

width:400px; 

height:200px; 

background:#f5f5f5; 

}

哪裏。指定這是一個類的名稱。

在本質上你

<div class="div">

是不是應用類，因爲「格」在你的CSS意味着這適用於所有的div元素。

隨着修改，我建議你的DIV將成爲

<div class="hideableDiv">

這則讓你的jQuery選擇：

$(".hideableDiv")

來源

2013-08-23 21:07:55

正是我在找的東西。之前設置了classes/id，但無法使其工作，我認爲這是因爲我沒有添加「。」。到JS中的選擇器我得到它與這個小提琴http://jsfiddle.net/dXWAY/5/ – benny

我不知道這是你想要什麼，但看着你小提琴，p不能在一個div，因爲你的CSS設置所有div顯示：無。

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

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

<p>hello</p>

作爲託詞提到，最好將您的顯示器：無分配給類而不是所有的div元素。

看到這裏

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

來源

2013-08-23 21:09:59 jboneca

是你想要創建一個手風琴？

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-23 21:19:45 Shivam

隱藏/顯示div，如何更改腳本內的標記

回答

相關問題