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

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

问题是我无法将标记设置为ID或类，而当前它被设置为元素选择器，这不是我想要的。我可以在这个JS中更改什么，这将允许我将它设置为一个类，我可以在单击时显示/隐藏它。拨弄

$（“p”）。单击（函数（）{
$（“div”）。滑动切换（“慢速”）；
})
p{
边界：0无；
字号：2em；
背景：透明；
}
div{
显示：无；
宽度：400px；
高度：200px；
背景:#f5；
}
你好

你好
你是说

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

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

$（“#myP”）。单击（函数（）{
$（“#myDiv”）。滑动切换（“慢速”）；
})
你好

你好
你是说

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

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

$（“#myP”）。单击（函数（）{
$（“#myDiv”）。滑动切换（“慢速”）；
})
你好

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

.hideableDiv {

display:none;

width:400px;

height:200px;

background:#f5f5f5;

}

其中，指定这是类的名称

本质上是你的

<div class="div">

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

.hideableDiv {

display:none;

width:400px;

height:200px;

background:#f5f5f5;

}

其中，指定这是类的名称

本质上是你的

<div class="div">

我不确定这是否是您想要的，但是看看您的小提琴，p不能在div中，因为您的css将所有div设置为显示：none

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

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

<p>hello</p>


你好>
你好


正如诡计所提到的，最好将显示分配给类：none而不是所有div元素

看这里

我不确定这是否是您想要的，但看看您的小提琴，p不能在div中，因为您的css将所有div设置为显示：none

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

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

<p>hello</p>


你好>
你好


正如诡计所提到的，最好将显示分配给类：none而不是所有div元素

看这里

您是否正在尝试制作手风琴


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


点击我！
Lorem ipsum dolor sit amet，奉献精英。发明人accusamus porro modi ut itaque ipsum natus explicabo vero sequei beatae liberto volupatibus坐在时间性痴呆的罪魁祸首！圣殿骑士团！
#投资组合{
背景：无重复滚动0 0#EEEEEE；
边界半径：10px 10px 10px 10px；
浮动：左；
宽度：200px；
}
#投资组合，投资组合img{
宽度：100%；
背景：#ccc；
溢出：隐藏；
浮动：左；
清除：左；
}
.toggleBtn{
背景：深蓝；
显示：块；
浮动：左；
宽度：100%；
填充：10px；
边框底部：1px实心#ccc；
边框顶部：1px实心#fff；
颜色：#fff；
光标：指针；
}
.内容{
背景：天蓝色；
浮动：左；
溢出：隐藏；
宽度：100%；
填充：10px；
}
$（'.content'）.hide（）；
$（'.toggleBtn'）。在（'click'，function（）上{
$（this）.next（'.content'）.slideToggle（）；
返回false；
});
您是否正在尝试创建手风琴


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


点击我！
Lorem ipsum dolor sit amet，奉献精英。发明人accusamus porro modi ut itaque ipsum natus explicabo vero sequei beatae liberto volupatibus坐在时间性痴呆的罪魁祸首！圣殿骑士团！
#投资组合{
背景：无重复滚动0 0#EEEEEE；
边界半径：10px 10px 10px 10px；
浮动：左；
宽度：200px；
}
#投资组合，投资组合img{
宽度：100%；
背景：#ccc；
溢出：隐藏；
浮动：左；
清除：左；
}
.toggleBtn{
背景：深蓝；
显示：块；
浮动：左；
宽度：100%；
填充：10px；
边框底部：1px实心#ccc；
边框顶部：1px实心#fff；
颜色：#fff；
光标：指针；
}
.内容{
背景：天蓝色；
浮动：左；
溢出：隐藏；
宽度：100%；
填充：10px；
}
$（'.content'）.hide（）；
$（'.toggleBtn'）。在（'click'，function（）上{
$（this）.next（'.content'）.slideToggle（）；
返回false；
});
您无法单击
p
，因为
div上的
display:none
。我不明白你的问题。你永远不能点击
p
，因为
div
上的
display:none
。我不明白你的问题，正是我想要的。我之前尝试过设置class/id，但无法让它工作，我想这是因为我没有在JS中的选择器中添加“.”我让它与我想要的一样工作。我之前尝试过设置classes/id，但无法让它工作，我想这是因为我没有在JS中的选择器中添加“.”我用这个小提琴使它工作是的，除了我将它改为一个类。是的，除了我将它改为一个类。