Javascript jQuery这个和切换问题
嗨,朋友们,我尝试学习jquery,但我遇到了一些问题, 图片下方的红色标签-当我单击它时,切换处于打开状态,但当我再次单击第二个时,第一个div处于打开状态 我的htmlJavascript jQuery这个和切换问题,javascript,jquery,html,css,Javascript,Jquery,Html,Css,嗨,朋友们,我尝试学习jquery,但我遇到了一些问题, 图片下方的红色标签-当我单击它时,切换处于打开状态,但当我再次单击第二个时,第一个div处于打开状态 我的html <ul class="otel-filtre-fiyat-tab"> <li class="otel-views"><a href="#"><img src="http://anitur.streamprovider.net/images/o
<ul class="otel-filtre-fiyat-tab">
<li class="otel-views"><a href="#"><img src="http://anitur.streamprovider.net/images/otel-filtre/d2.png" alt="" class="memnuniyet-durum" />
<strong>88/100</strong>
<span class="otel-goruntuleme">274 Görüntüleme</span>
</a></li>
<li class="otel-prices"><a href="#">
<strong>Tüm Fiyatlar</strong>
<span class="otel-goruntuleme">Size Özel en uygun fiyatlar</span>
</a></li>
</ul>
</div><!--otel filtre ozellikler-->
<div class="clr"></div>
</div><!--otel tek liste-->
<div class="otel-filtre-tab">
<div class="otel-tab-icerik otel-full-detay">
<div class="otel-degerlendirme">
<div class="degerlendirme-baslik">Değerlendirme</div>
<div class="otel-tab-detay">
<div class="degerlendirme-not">
<div class="c100 p85 green">
<span>85%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div><!--dairesel genel değerlendirme-->
</div><!-- degerlendirme not -->
<div class="degerlendirme-yorum">
<div class="yorum-bar">
<div class="yorum-bilgi">
<p>
<span class="otel-yorum-kisi">Hakan2020</span>
<span class="otel-yorum-konum">Denizli,Türkiye</span>
<span class="otel-yorum-tarih">26 Eylül 2015</span>
</p>
</div><!-- yorum bilgi -->
<div class="otel-yorum-profil">
<img src="http://anitur.streamprovider.net/images/otel-filtre/profile.jpg" alt="" />
</div>
<div class="yorum-content">
<h3><a href="#">“Özellikle, yeme içme kalitesi arayanlar için...”</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque provident accusantium sint tempore! Fugiat debitis maxime eos? <a href="#">Devamını oku</a></p>
</div>
</div><!-- yorum bar-->
<div class="yorum-bar">
<div class="yorum-bilgi">
<p>
<span class="otel-yorum-kisi">Hakan2020</span>
<span class="otel-yorum-konum">Denizsiz,Türkiye</span>
<span class="otel-yorum-tarih">26 Eylül 2015</span>
</p>
</div><!-- yorum bilgi -->
<div class="otel-yorum-profil">
<img src="http://anitur.streamprovider.net/images/otel-filtre/profile.jpg" alt="" />
</div>
<div class="yorum-content">
<h3><a href="#">“Özellikle, yeme içme kalitesi arayanlar için...”</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque provident accusantium sint tempore! Fugiat debitis maxime eos? <a href="#">Devamını oku</a></p>
</div>
</div><!-- yorum bar-->
</div><!-- degerlendirme yorum -->
</div>
<div class="clr"></div>
</div><!-- otel degerlendirme-->
<h3>Genel Değerlendirme</h3>
<div class="otel-genel-degerlendirme">
<div class="tum-degerlendirmeler">
<a href="#" class="tab-zero-link">Tüm Değerlendirmeler</a>
<h4>Tüm İzlenimler</h4>
<h4 class="degerlendirme">%77 Çok İyi <span>2524 yoruma göre</span></h4>
</div><!--tum degerlendirmeler-->
<div class="diger-degerlendirmeler">
<ul class="tab-degerlendirme">
<li><a href="#" class="ciftler-bg">%35 Çiftler</a></li>
<li><a href="#" class="aile-bg">%35 Aile</a></li>
<li><a href="#" class="is-seyahati-bg">%35 İş Seyahati</a></li>
<li><a href="#" class="yalniz-gezginler-bg">%35 Yalnız Gezginler</a></li>
</ul><!--tab menuler-->
<div class="tab-degerlendirme-icerik">
<div class="tab-filtre-icerik" id="ciftler">
<div class="demo-show2">
<h3>KAHVALTI <span class="accord-progress"></span><span class="mmn-oran">59%</span><span class="span-list">“Kahvaltı İyi”</span><span class="accord-chevron"></span></h3>
<div>Deneme 1 'in içeriği</div>
<h3>KAHVALTI <span class="accord-progress"></span><span class="mmn-oran">59%</span><span class="span-list">“Kahvaltı İyi”</span><span class="accord-chevron"></span></h3>
<div>Deneme 2 'in içeriği</div>
<h3>KAHVALTI <span class="accord-progress"></span><span class="mmn-oran">59%</span><span class="span-list">“Kahvaltı İyi”</span><span class="accord-chevron"></span></h3>
<div>Deneme 3 'in içeriği</div>
</div>
<!--<div id="progressbar-durum">
<div></div>
</div>-->
</div>
<div class="tab-filtre-icerik" id="aile">aile..
%35
</div>
<div class="tab-filtre-icerik" id="is-seyahati">iş seyahati..</div>
<div class="tab-filtre-icerik" id="yalniz-gezginler-bg">yalnız gezginler..</div>
</div><!-- tab icerik kismi-->
</div><!--diger degerlendirmeler-->
</div><!-- otel genel değerlendirme-->
</div><!-- tab icerik-->
<div class="otel-tab-icerik otel-fiyat-detay-icerik">otel içerik 2..</div><!-- tab icerik -->
</div><!-- otel filtre tab -->
我犯了什么错
和代码笔链接:
http://codepen.io/cowardguy/pen/rxdpLp
您需要使用其他选择器来访问所需的元素。首先,您需要使用
.parent()
或类似的选择器在dom树中向上爬升,然后使用.children()
或或或其他类似的选择器向下进入dom树中的元素
这是您的工作示例:
$(".otel-views a").on("click",function(){
$(this).parents('.otel-tekli-listeleme').find('.otel-full-detay').slideToggle();
return false;
});
这是固定的你的选择器明确地说::first
,所以我不知道你为什么不希望它总是打开第一个元素。你能粘贴你的HTML以便我们帮助你理解它是如何工作的吗?@Juhana我想当我点击第一个li时,第一个切换必须打开,但当我点击第二个li时,第二个切换必须打开(对我的英语感到抱歉)是的,我知道你想做什么,但是:第一个显然永远不会切换第二个div。这不是确切的代码,你必须调整它。过程很简单->获取你的的父项。otel查看一个,然后找到你想要切换的otel完整的detay
。我无法为你编写正确的代码,因为你需要这样做M相当大,但你可以自己做,我为另一个li a做了这个函数,它有。otel prices类我想知道,当另一个div被触发时,如何关闭切换的div?
$(".otel-views a").on("click",function(){
$(this).parents('.otel-tekli-listeleme').find('.otel-full-detay').slideToggle();
return false;
});