我试图创建一个没有ID的盒子。 我的意思是当我按下一个按钮（也没有ID）和其他所有的＆＃34; moreinfo＆＃34;文字不应该向下滑。
以下是我使用ID的示例。
$(document).ready(function(){
$('a[href*=#]').bind("click", function(e){ //Only a smooth scroll funtion
var anchor = $(this);
$('html, body').stop().animate({
scrollTop: $(anchor.attr('href')).offset().top
}, 1000);
e.preventDefault();
});
return false;
});
//Here I must define every content box. And my goal is, that i need only one function.
$('#box1_more_btn').click(function() {
if($('#box1_more').css('display') == 'none') {
$('#box1_more_btn').text("less");
$('#box1_more').slideDown(400);
} else {
$('#box1_more_btn').text("more");
$('#box1_more').slideUp(400);
}
});
$('#box2_more_btn').click(function() {
if($('#box2_more').css('display') == 'none') {
$('#box2_more_btn').text("less");
$('#box2_more').slideDown(400);
} else {
$('#box2_more_btn').text("more");
$('#box2_more').slideUp(400);
}
});.moreinfo {
display:none;
}
#box_1 {
color: black;
background-color: #F2F2F2;
}
#box1_more {
background-color: rgba(0,0,0,0.008)
}
#box_2 {
color: black;
background-color: #F2F2F2;
}
#box2_more {
background-color: rgba(0,0,0,0.008)
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="wrapper">
<br /><br />
<div id="box_1" class="box">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="featurette-heading">This is a<span class="text-muted"> header</span></h2>
<p class="lead">
First box ... <a href="#box_1"><span id="box1_more_btn">more</span></a> !
</p>
</div>
</div>
</div>
<div class="container moreinfo" id="box1_more">
<div class="row">
<div class="col-md-12">
<h3>More Info</h3>
This is the first more Info box<br /><br />
</div>
</div>
</div>
</div> <!-- BOX-1 end-->
<br /><br /><br /><br />
<div id="box_2" class="box">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="featurette-heading">This is a<span class="text-muted"> header</span></h2>
<p class="lead">
Second box ... <a href="#box_2" id="box2_more_btn">more<!-- This Button should also rename--></a> !
</p>
</div>
</div>
</div>
<div id="box2_more" class="container moreinfo">
<div class="row">
<div class="col-md-12">
<h3>More Info</h3>
This is the second more Info box<br /><br />
</div>
</div>
</div>
</div> <!-- BOX-2 end-->
</div>
</body>
所以我想象它没有ID。 我试过了，但不知道怎么去
这是我没有使用ID的尝试：
$(document).ready(function(){
$('a[href*=#]').bind("click", function(e){
var anchor = $(this);
$('html, body').stop().animate({
scrollTop: $(anchor.attr('href')).offset().top
}, 1000);
e.preventDefault();
});
return false;
});
//Here I must define every content box. And my goal is, that i need only one function.
$('.morebtn').click(function() {
if($('.moreinfo').css('display') == 'none') {
$('.morebtn').html('<a href="#"> less </a> '); // Is it possible too, that the window scroll down to "this" div?
$('.box_moreinfo').slideDown(400);
} else {
$('.morebtn').html('<a href="#"> more </a> ');
$('.box_moreinfo').slideUp(400);
}
});
.moreinfo {
display:none;
}
.box {
color: black;
background-color: #F2F2F2;
}
.box_moreinfo {
background-color: rgba(0,0,0,0.008)
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div id="wrapper">
<br /><br />
<div class="box">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="featurette-heading">This is a<span class="text-muted"> header</span></h2>
<p class="lead">
First box ... <span class="morebtn"><a href="#">more</a></span> !
</p>
</div>
</div>
</div>
<div class="container moreinfo box_moreinfo">
<div class="row">
<div class="col-md-12">
<h3>More Info</h3>
This is the first more Info box<br /><br />
</div>
</div>
</div>
</div> <!-- BOX-1 end-->
<br /><br />Now, both boxes slideOut on click...<br /><br /><br />
<div class="box">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="featurette-heading">This is a<span class="text-muted"> header</span></h2>
<p class="lead">
First box ... <span class="morebtn"><a href="#">more</a></span> !
</p>
</div>
</div>
</div>
<div class="container moreinfo box_moreinfo">
<div class="row">
<div class="col-md-12">
<h3>More Info</h3>
This is the first more Info box<br /><br />
</div>
</div>
</div>
</div><!-- BOX-2 end-->
</div>
</body>
答案 0 :(得分：0)
只是看着你的标记，你已经让自己的生活变得非常困难！
如果这是我正在做的事情，我会在HTML中更明确地建立关系：
<section class="has-more-info">
<h1>Header</h1>
<p>
Text here...
</p>
<button class="show-more-info">Show more</button>
<div class="more-info hidden">
<h3>More Info</h3>
<p>This is the first more Info box</p>
</div>
</section>
然后你可以使用：
$('.has-more-info').each( function() {
$(this).find('.show-more-info').click( function(e) {
e.preventDefault();
$(this).siblings('.more-info').slideToggle();
});
});
您需要将.hidden类设置为display：none;最初，或加载，以免妨碍非JS用户。
我没有对此进行测试，但这个概念应该让你去。