我目前正在网站上创建一个位置页面,但是我遇到了显示/隐藏jquery效果的问题。下面的jQuery激活点击并应用切换div的类来显示/隐藏它......非常简单。但是,当我添加更多具有相同类的div并单击激活器链接时,它会在所有div上运行函数。我知道这是一个简单的修复,但我无法弄清楚正确的语法。任何人都可以快速查看此代码,看看我如何解决它。我只包括下面的一个html div。当我有多个导致问题的时候。请参阅example here。
谢谢, 泰勒
的jQuery
$(function(){
$(".sliding").hide();
$(".show-hide").show();
$(".hide-click").show();
$('.show-hide').click(function(){
$(".sliding").slideToggle("slow");
$(".hide-click").slideToggle("slow");
});
});
HTML
<!-- Bowie, MD -->
<div class="location" style="margin-top: 0;">
<!-- City Name -->
<h3><a href="javascript:void(0);" class="show-hide">Bowie</a></h3>
<h2>Address</h2>
<p>16901 Melford Blvd, Suite 11<br/>
Bowie, MD 20715</p>
<h2>Contact</h2>
<p><span><strong>Phone:</strong> 301.805.5395</span><br />
<span><strong>Fax:</strong> 301.805.5396</span></p>
<span class="hide-click"><a href="javascript:void(0);" class="show-hide">View additional info</a></span>
<!-- Hidden Content -->
<div class="sliding">
<h2>Map</h2>
<div class="map">
<iframe width="211" height="140" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=16901+Melford+Blvd,+Suite+11+Bowie,+MD+20715&sll=37.0625,-95.677068&sspn=61.023673,112.236328&ie=UTF8&hq=&hnear=16901+Melford+Blvd,+Bowie,+Maryland+20715&ll=38.959742,-76.714354&spn=0.009344,0.018196&z=14&iwloc=A&output=embed"></iframe>
</div>
<a href="http://maps.google.com/maps?f=d&source=s_d&saddr=16901+Melford+Blvd,+Suite+11+Bowie,+MD+20715&daddr=&hl=en&geocode=&mra=prev&sll=38.959741,-76.714349&sspn=0.00755,0.013422&g=16901+Melford+Blvd,+Suite+11+Bowie,+MD+20715&ie=UTF8&z=17" target="_blank" class="directions">Get Directions</a>
<h2>Doctors</h2>
<p><a href="/#phillips.php">William B. Phillips, II M.D.</a>, <a href="/#weichel.php">Eric D. Weichel, M.D.</a></p>
<a href="javascript:void(0);" class="show-hide">Hide additional info</a>
</div>
<!-- end Hidden Content -->
</div>
<!-- end Location -->
答案 0 :(得分:4)
如果我理解正确,您只需要与其.show-hide链接关联的.sliding内容进行切换。您可以设置jQuery上下文以查找正确的.sliding元素。这样您就不会认为元素处于某个位置,并且您没有依赖于独特的CSS ID,从而可以提供更大的灵活性。
$(function(){
$(".sliding").hide();
$(".show-hide").show();
$(".hide-click").show();
$('.show-hide').click(function(){
//find the surrounding div
var location = $(this).parent().parent();
//find the correct elements within the location block
$(".sliding",location).slideToggle("slow");
$(".hide-click",location).slideToggle("slow");
});
});
答案 1 :(得分:3)
您可以使用:first
或:nth-child
选择器。
请参阅JQuery文档:
http://api.jquery.com/nth-child-selector/
http://api.jquery.com/first-selector/
示例:
$(".sliding").hide();
答案 2 :(得分:1)
您可以向div
id
提供#divID
,然后在jQuery选择器中使用div
,只选择$('#divID').hide();
:
{{1}}
ID的重点在于它只能应用于页面中的一个元素,而类可以应用于任意数量的元素。
答案 3 :(得分:1)
有两个选项:
1)使用id选择器作为$()的参数,并将id属性只添加到你想要的一个div中,
<div id="someid">
然后js看起来像$("#someid").show()
2)使用$($()。get(N))。show()其中N是您想要影响的div的已知索引。但是,很难推荐这种解决方案,因为如果重新格式化页面,它有更大的机会崩溃。
答案 4 :(得分:1)
$(this).parents(".sliding").slideToggle("slow")
答案 5 :(得分:1)
我会这样做。
首先设置除了第一个之外的所有div,并将等级dn
设置为您的css中的display:none
。
然后你的javascript你可以做这样的事情。 我假设你希望你的点击触发器始终可见。
$(function(){
$('.show-hide').click(function(){
$(".sliding").slideUp("slow");
$(this).next(".sliding).slideDown("slow");
});
});
答案 6 :(得分:0)
例如:
$(".sliding:eq(0)").slideToggle("slow");
将其设置为“.sliding”类的第一个元素。