我想在单击名为 .neo_expand_button 的按钮时展开 .neo_accord_content_。我找到了几种解决方案，但似乎都不适用于我的情况
这是我的 HTML:
<body>
<div id="neo_wrapper"> <!-- Wrapper start -->
<div id="neo_container"> <!-- Container start -->
<div id="neo_header"> <!-- Header start -->
<div class="neo_logo">
<img src="http://fpoimagery.com/?t=px&w=200&h=100&bg=0ff&fg=000000" />
</div>
<div id="neo_main_nav"> <!-- Main navigation -->
<ul>
<li>About Us</li>
<li>Services</li>
<li>Portfolio</li>
<li>Brokerage</li>
<li>Tenant Portal</li>
</ul>
</div> <!-- Main navigation end -->
</div> <!-- Header end -->
<div id="neo_home_image">
</div>
<div id="neo_about_section">
<div class="text_container">
<h1>About the Grossman Companies</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="about_button">
<p>Read More</p>
</div>
</div> <!-- About section end -->
<div id="neo_accord_section"> <!-- Accord section start -->
<div class="neo_accord">
<div class="neo_accord_header">
<h1 class="neo_accord_headertext">Acquisitions</h1>
<div class="neo_expand_button">
<p>Expand</p>
</div>
</div>
<div class="neo_accord_content">
<div class="text_container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<!--<div class="neo_accord">
<div class="neo_accord_header">
<h1 class="neo_accord_headertext">Private Lending</h1>
<div class="neo_expand_button">
<p>Expand</p>
</div>
</div>
<div class="neo_accord_content">
</div>
</div>-->
<!--<div class="neo_accord">
<div class="neo_accord_header">
<h1 class="neo_accord_headertext">Private Lending</h1>
<div class="neo_expand_button">
<p>Expand</p>
</div>
</div>
<div class="neo_accord_content">
</div>
</div>
<div class="neo_accord">
<div class="neo_accord_header">
<h1 class="neo_accord_headertext">Private Lending</h1>
<div class="neo_expand_button">
<p>Expand</p>
</div>
</div>
<div class="neo_accord_content">
</div>
</div>-->
</div> <!-- Accord section end -->
</div> <!-- Container end -->
</div> <!-- Wrapper end -->
</body>
我的 SASS:
body, html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#neo_wrapper { /* Wrapper for entire page */
width: 100%;
height: 1800px;
margin: 0 auto;
background-color:#333;
#neo_container { /* Main content container */
width: 100%;
height: 100%;
margin: 0 auto;
background:#999999;
#neo_header { /* Header for logo, navigation */
width: 100%;
height: 100px;
background-color:#666666;
.neo_logo { /* Grossman logo */
float: left;
width: 200px;
height: 100px;
}
#neo_main_nav { /* Main navigation */
float: left;
margin: 55px 0 0 500px;
ul {list-style: none; padding-left: none; color: #FFF; font-size: 18px;}
li {
float: left; margin: 10px;
a {
/* Formatting for list items */
&:link {text-decoration: none; color: #FFFFFF;}
&:hover {color: #CCC; background-color: #333;}
&:active {color: #222; background-color: #222;}
&:visited {text-decoration:none; color: #FFF; background-color: #222;}
}
}
} /* Nav end */
} /* Header end */
.text_container { /* Container for centered text */
width: 500px;
text-align: center;
color:#000;
margin: 0 auto;
}
#neo_home_image { /* Fullbleed image */
width: 100%;
height: 400px;
}
#neo_about_section { /* About section */
width: 100%;
height: 200px;
background: #FFF;
.about_button {
width: 150px;
height: 35px;
background-color:#222;
color: #FFF;
text-align: center;
line-height: 35px;
margin: 0 auto;
margin-top: 15px;
cursor: pointer;
display: table;
}
} /* About section end */
#neo_accord_section {
width: 100%;
height: 700px;
.neo_accord { /* Drop down sections */
width: 100%;
height: 100px;
background: #222;
border: solid #FFF 1px;
.neo_accord_header { /* Header area in accordion section */
width: 100%;
height: 100px;
background: #222;
h1.neo_accord_headertext {
margin: 0 auto;
text-align: center;
font-size:24px;
color: #FFF;
}
.neo_expand_button {
width: 200px;
height: 35px;
background:#F00;
line-height: 35px;
text-align: center;
color: #FFF;
display: table;
cursor: pointer;
margin: 0 auto;
margin-top: 15px;
}
} /* End accordion header */
.neo_accord_content {
display: none;
background:#CCC;
color: #000;
width: 100%;
height: 150px;
margin: 0 auto;
}
} /* Accord container end */
} /* Accord section end */
} /* Container end */
} /* Wrappper end */
和 JQuery:
// JavaScript Document
$(document).ready(function () {;
$("#neo_home_image").backstretch("http://fpoimagery.com/?t=px&w=960&h=400&bg=0ff&fg=000000 ");
$(".neo_expand_button").click(function () {
$(this).find('.neo_accord_content').slideToggle("slow");
//alert ("hello");
});
});
这是我的 jsFiddle:http://jsfiddle.net/6brxu/
最佳答案
$(document).ready(function () {;
$(".neo_expand_button").click(function (e) {
e.preventDefault();
$('.neo_accord_content').slideToggle("slow");
});
});
您之前的 Javascript 正在使用“.neo_expand_button”搜索类“.neo_accord_content”。我将其更改为搜索该类(class)的页面。
关于javascript - 使用 jQuery 展开一个 Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25068902/