我正在处理一个网页，但在显示列表项的描述div时遇到问题。
当我单击一个特定的li时（例如，Work abo…），我只想切换该特定li的div，但是它们都被切换了，而我似乎找不到问题所在。
当我单击#more_services ul内的任何列表项时，我需要在单击的特定li下方显示div.secondary-services-description。
$( document ).ready(function() {
//shows form
$('.login_color a').click(function(){
$("#form").toggle();
$("#form").click(function(e){
e.stopPropagation(); //prevents the form from closing when clicking on it
});
return false;
$("#form").fadeTo(1000,1);
$("body").css({
"-webkit-filter": "blur(5px)",
"-moz-filter": "blur(5px)",
"-o-filter": "blur(5px)",
"-ms-filter": "blur(5px)",
"filter": "blur(5px)"
});
});
//Image Slider
var $slideIndex = 1;
showSlides($slideIndex);
$("#prev_slide").click(function(){
plusSlides(-1);
});
$("#next_slide").click(function(){
plusSlides(1);
});
function plusSlides(n) {
showSlides($slideIndex += n);
}
function currentSlide(n) {
showSlides($slideIndex = n);
}
function showSlides(n) {
var $i;
var $slides = $(".slides");
if (n > $slides.length){
$slideIndex = 1;
}
if (n < 1) {
$slideIndex = $slides.length;
}
for(i = 0; i <$slides.length; i++ ){
$($slides[i]).css({"display": "none"});
}
$($slides[$slideIndex - 1]).css({"display": "block"});
}
//adds the full description on each service when clicking on the service title
var $expander = $('.service-item div > + p + p ');
$(".service_description").click(function(){
$(".service_description").css({ "height": "314px"});
$expander.show();
$(".service_description").click(function(){
$expander.toggle();
$(".service_description").css({ "height": "163px"});
});
});
//toggles secondary services' description
$(".secondary-services-description").hide();
$("#more_services li").click(function(e){
e.preventDefault();
var $this = $(this).parent().find(".secondary-services-description");
$("#more_services div.secondary-services-description").not($this).hide();
$this.toggle();
});
$("#even_more_services li").click(function(){
$(".secondary-services-description").toggle();
});
// toggles the additional secondary services upon view more click
$("#view_more").click(function(){
$("#even_more_services").toggle();
$(this).html( ($('#view_more').text() == 'View less') ? 'View more' : 'View less' );
});
/*$(".service_description").click(function(){
var $this = $(this);
$(".service_description" ).css({ "height": "314px"});
//try to automatically add the full description p
var $description = $(".service_description p" ).css({ "max-height": "170px"});*/
// $description.after("<p class=\"full-description\">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.</p>");
// $(document).click(function(){
// var $trigger = $(".service_description");
// if($trigger !== event.target && !trigger.has(event.target).length){
// $(".full-description").slideUp("fast");
// }
});/**********************************
GENERAL
***********************************/
@font-face {
font-family: "NeoSans";
src: url("Neo Sans Std Regular.otf") format('opentype');
}
body {
background-color: #eff1f1;
color: cbcbcb;
font-family: "NeoSans", Arial;
}
/* #blurry{
position:absolute;
padding:20px;
color: transparent;
text-shadow:0px 0px 0px #000;
} */
#wrapper {
max-width: 980px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
/**********************************
COLORS
***********************************/
/* Login text on mobile*/
#login_register{
background-color: #53b8c4;
font-weight: normal;
margin: -5px 0 0;
text-align: left;
padding: 10px 0;
right:0px;
}
.login_color, .login_color a:visited {
color: #fff;
}
#business {
background-color: #000;
display: inline-block;
margin-bottom: 5px;
padding: 5px;
}
/**********************************
HEADING
***********************************/
header {
width: 100%;
position: relative;
}
#logo {
text-align: center;
margin: 0;
text-transform: uppercase;
}
#logo h1{
color: #53b8c4;
margin: 20px 0;
font-size: 1.5em;
font-weight: normal;
line-height: 0.8em;
padding: 5% 0;
}
#login_register p {
margin-left: 5px;
font-size: .6em;
padding-left: 5px;
line-height: 50%;
}
.login_color {
padding: 0 5px;
}
/**********************************
FORM
***********************************/
#form {
display: none;
background-color: #fff;
position: absolute;
top: 8em;
right: 4em;
z-index: 60;
width: 44%;
margin: 2%;
padding: 10px;
}
#form::after{
content: "X";
font-size: 1em;
background-color: #53b8c4;
color: #fff;
position: absolute;
bottom: -63%;
right: 2%;
bottom: -50px;
padding: 8px;
}
form img {
position: absolute;
top: 30%;
left: 8%;
}
form input {
width: 36%;
margin: 5% 30%;
padding: 5px;
display: block;
background-color: #ccc;
color: #fff;
font-size: 0.7em;
}
form input::placeholder {
color: #fff;
}
/*Internet Explorer*/
form input:-ms-input-placeholder{color: #fff;}
/*Edge, Safari, Opera*/
form input::-webkit-input-placeholder{color: #fff;}
form button {
position: absolute;
top: 21%;
right: 3%;
background-color: #53b8c4;
color: #fff;
font-weight: bold;
padding: 11px;
height: 63px;
}
/**********************************
SLIDER CAROUSEL
***********************************/
.slider{
max-width: 1000px;
margin: 0 auto;
padding: 0;
position: relative;
}
.slides {
display: none;
position: relative;
width:100%;
margin:0 auto;
}
.slides img {
vertical-align: middle;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.text-office p, .text-floor p {
position: absolute;
top: 40%;
left: 6%;
color: #fff;
font-size: 2.2em;
font-weight: bold;
}
.text-office span, .text-floor span {
position: absolute;
left: 41%;
font-weight: normal;
}
.text-office p::after {
content: "+";
background-color: #53b8c4;
color: #fff;
font-size: 0.7em;
/*width: 30px;
height: 30px;*/
margin-left: 10px;
padding: 0 4px;
}
.text-floor p::after {
content: "+";
background-color: #53b8c4;
color: #fff;
font-size: 0.7em;
/*width: 30px;
height: 30px;*/
margin-left: 10px;
padding: 0 4px;
}
.slides img {
max-width: 100%;
width: 100%;
}
.navigation {
background-color: #53b8c4;
color: #fff;
font-size: 1.4em;
height: 36px;
/* max-width: 919px; */
padding: 3px 0;
position: relative;
width:100%;
margin:0 auto;
}
.navigation a {
display: inline-block;
margin: 0 10px;
cursor: pointer;
}
.navigation a.prev {
position: absolute;
left: 5px; /* 20px for greater width */
}
.navigation a.next {
position: absolute;
right: 0;
}
/**********************************
SERVICES
***********************************/
.services {
list-style: none;
width: 100%;
margin-left: 0;
}
.services li{
display: flex;
flex-direction: row;
/* padding: 2%; */
width: 100%; /* 45%; desktop*/
/* margin: 2.5% 2.5% 2.5% -15% ; */
float: left;
background-color: #fff;
height: 50%;
margin-bottom:20px;
margin-left: -36px;
}
li.service-item:nth-child(2n+1) {
margin-right: 5px;
}
/*li.service-item:nth-child(2n) {
margin-left: 5px;
}
*/
.services li p {
font-size: .69em;
}
.services li p, h3{
/*padding: 2%;*/
color: #7d7d7d ;
}
.number {
background-color: #53b8c4;
display: block;
width: 120px;
height: 100%;
float: left;
text-align: center;
}
.services .number p {
font-size: 3em;
color: #fff;
margin-top: 31%;
}
.service_description {
margin-left: 5px;
position: relative;
float: right;
width: 50%;
}
.service_description p {
max-width: 87%;
max-height: 70px;
}
.service_description::after {
position: absolute;
top: 39%;
left: 79%;
content: "+";
color: #53b8c4;
font-size: 2em;
width: 20%;
float: right;
margin-bottom: 50%;
}
.full-description{
display: none;
}
.active {
height: 314px;
}
#more_services, #even_more_services {
list-style: none;
clear: both;
width: 100%;
}
#more_services li, #even_more_services li {
display: inline-block;
margin: 6%;
border-bottom: 3px solid #53b8c4;
max-width: 110px;
}
#more_services li > p {
display: inline;
}
#even_more_services li a::after {
content: "+";
background: #53b8c4;
width: 100px;
height: 100px;
margin-left: 9px;
padding: 2px;
color: #fff;
position: relative;
left: 1%;
}
/* Adjust the " + " after element for the last 3 descriptions */
#more_services li:nth-last-child(6)::after{
margin-left: 10px;
}
#more_services li:nth-last-child(4)::after{
margin-left: 7px;
}
#more_services li:nth-last-child(2)::after{
margin-left: 5px;
}
#even_more_services li::after {
content: "+";
background: #53b8c4;
width: 100px;
height: 100px;
margin-left: 13px;
padding: 2px;
color: #fff;
}
/* Adjust the " + " after element for the last 3 descriptions */
#even_more_services li:nth-last-child(6)::after{
margin-left: 14px;
}
#even_more_services li:nth-last-child(4)::after{
margin-left: 11px;
}
#even_more_services li:nth-last-child(2)::after{
margin-left: 9px;
}
.secondary-services-description {
display: none;
font-weight: normal;
font-size: .75em;
padding: 10px;
margin-top: -6.2%;
margin-left: 3%;
color: #fff;
background-color: #53b8c4;
position: relative;
width: 34.3%;
}
.secondary-services-description p {
font-size: 11px;
/*padding: 6px;*/
}
.secondary-services-description p::after {
display: block;
content: ">";
text-align: right;
color: #fff;
font-size: 2em;
position: absolute;
bottom: -2px;
right: 3px;
}
#view_more {
display: block;
text-align: center;
color: #53b8c4;
margin: 20px;
}
#even_more_services {
display: none;
}
/**********************************
FOOTER
***********************************/
footer {
font-size: 0.75em;
text-align: left;
padding-top: 50px;
width: 100%;
/* height: 400px; */
position: relative;
}
h2#client_article{
font-size: 1.2em;
display: inline;
margin-left: 5px;
/*margin-bottom: 2em;*/
position: relative;
/*top: 41px;*/
}
.footer-navigation {
display: inline;
position: relative;
}
.footer-arrows {
text-align: center;
/* display: inline-block; */
position: absolute;
right: 0;
top: 26px;
}
.footer-arrows a {
display: inline-block;
width: 40px;
height: 40px;
/* margin-bottom: 20em; */
font-size: 2em;
color: #fff;
background-color: #53b8c4;
}
#article {
background-color: #fff;
height: 94%;
width: 100%;
position: relative;
overflow:hidden;
}
.triangle-top {
width: 0;
height: 0;
border-right: 20px solid transparent;
border-left: 45px solid #53b8c4;
border-bottom: 45px solid transparent;
position: absolute;
top: 0;
left: 0;
}
.triangle-bottom {
display: none;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 45px solid #53b8c4;
border-top: 45px solid transparent;
position: absolute;
bottom: 0;
right: 0;
}
#article h2 {
padding: 2% 5%;
}
#article p{
max-height: 10px;
float: left;
max-width: 50%;
max-height: 50%;
word-break: break-word;
margin-left: 2.5em;
margin-top: -54px;
}
.image-container{
width: 40%;
float: right;
}
.image-container img {
max-width: 100%;
margin: 10% 5px;
}
#read_article {
color: #53b8c4;
bottom: 0;
right: 0;
position: absolute;
margin-right: 5px;
margin-right:9%!important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Business Company</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1 id="logo"><span id="business">The Business</span> Company</h1>
</a>
</header>
<div class="slider">
<div id="form">
<form id="login_form">
<img src="img/lock.jpg" alt="">
<input type="email" id="email" placeholder="Your e-mail" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your email'">
<input type="password" id="password" placeholder="Your password" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your password'">
<button> ❯ GO</button>
<!-- the X button for closing the menu -->
</form>
</div>
<div id="login_register">
<p><span class="login_color"> ❯ <a href="#login_form"> Login</a></span> or <span class="login_color">Register</span> to enjoy all the benefits of our site !</p>
</div>
<!-- Image 1 -->
<div class="slides fade">
<img src="img/banner image 1.jpg" alt="Office image 1">
<div class="text-office">
<p><span>the</span> <br> OFFICE</p>
</div>
</div>
<!-- Image 2 -->
<div class="slides fade">
<img src="img/banner image 2.jpg" alt="Office image 2">
<div class="text-floor">
<p><span>the</span> <br> FLOOR</p>
</div>
</div>
<div class="navigation">
<a class="prev" id="prev_slide" > ❮</a>
<a class="next" id="next_slide"> ❯</a>
</div>
</div>
<div id="wrapper">
<section>
<ul class="services">
<li class="service-item"><span class="number"><p>01</p></span>
<div class="service_description">
<h3>Our services</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
<p class="full-description">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.</p>
</div>
</li>
<li class="service-item"><span class="number"><p>02</p></span>
<div class="service_description">
<h3>Our rates</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
<p class="full-description">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.</p>
</div>
</li>
<li class="service-item"><span class="number"><p>03</p></span>
<div class="service_description">
<h3>Case studies</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
<p class="full-description">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.</p>
</div>
</li>
<li class="service-item"><span class="number"><p>04</p></span>
<div class="service_description">
<h3>Get a quote</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
<p class="full-description">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.</p>
</div>
</li>
</ul>
<ul id="more_services">
<li> <p>Work abo...
</p> </li>
<li><p>Test text... </p> </li>
<div class="secondary-services-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris.</p>
</div>
<li><p>Just a sim... </p> </li>
<div class="secondary-services-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris.</p>
</div>
<li><p>Nothing h... </p> </li>
<div class="secondary-services-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris.</p>
</div>
</ul>
<a href="#more_services" id="view_more">View More</a>
<ul id="even_more_services">
<li>
<a>Work abo... </a>
</li>
<div class="secondary-services-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris.</p>
</div>
<li>Test text...</li>
<div class="secondary-services-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris.</p>
</div>
<li>Just a sim...</li>
<div class="secondary-services-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris.</p>
</div>
<li>Nothing h...</li>
<div class="secondary-services-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris.</p>
</div>
</ul>
</section>
</div>
<!-- <h2 id="client_article">Article about one client...</h2> -->
<footer>
<h2 id="client_article">Article about one client...</h2>
<div id="article">
<div class="triangle-top"></div>
<!-- <div class="footer-navigation"> -->
<!-- </div> -->
<div class="image-container">
<img src="img/image_1_footer.jpg" alt="Office image">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Lectus quam id leo in vitae turpis massa sed. </p>
<div class="triangle-bottom"></div>
<p id="read_article"> ❯ Read article</p>
</div>
<div class="footer-arrows">
<a class="prev"> ❮</a>
<a class="next"> ❯</a>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>
问题是所有div都在显示，而不仅仅是最靠近被单击的li的那个。
这是我的网页的代码：
<ul id="more_services">
<li>Work abo... </li>
<div class="secondary-services-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris.</p>
</div>
https://jsfiddle.net/t63L5py2/47/
感谢您的帮助，谢谢！
答案 0 :(得分：0)
那呢：
var $this = $(this).next(".secondary-services-description");
代替：
var $this = $(this).parent().find(".secondary-services-description");
您实际上不必遍历父对象，可以直接转到实际需要的下一个对象。
答案 1 :(得分：0)
$(".service_description").click(function(){
$(this).animate({ "toggleHeight": "314px"});
$(this).find(".full-description").toggle();
});
无需使用扩展器来存储元素。只需使用this和toggle。这引用了被单击的项目。
我编辑了列表项，以便您可以在每次单击时引用它。我不确定这是否应该是这样的设置，所以我以这个为例。我在实际的列表项中移动了特定元素的隐藏描述，例如
<ul id="more_services">
<li> <p>Work abo...</p>
<div class="secondary-services-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris.</p>
</div>
</li>
<li>
<p>Test text... </p>
<div class="secondary-services-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris.</p>
</div>
</li>
<li>
<p>Just a sim... </p>
<div class="secondary-services-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris.</p>
</div>
</li>
<li>
<p>Nothing h... </p>
</li>
</ul>
然后将事件处理程序更改为如下所示……
$("#more_services li").click(function(e){
e.preventDefault();
var $this = $(this).find(".secondary-services-description");
$this.toggle();
});
答案 2 :(得分：0)
请不要忘记<div>元素不能是<ul>或<ol>的直接后代。这是无效的，因为其中仅允许<li>。