Javascript 点击打开和关闭多个div,div分为左和右
我有两个Javascript 点击打开和关闭多个div,div分为左和右,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有两个divs(左和右)。如果单击左侧div中的链接,则应在右侧div中打开数据,其中有多个问题。每个问题都可以单击并在单击时显示答案 我已经实现了以下内容,但是当一个问题打开时,上一个问题保持打开状态,而不是关闭状态。我尝试使用切换,关闭同一链接 我的JavaScript: $('.targetDiv').hide(); $('.show').click(function () { $('#div' + $(this).attr('target')).toggle(); }); $(
div
s(左和右)。如果单击左侧div
中的链接,则应在右侧div
中打开数据,其中有多个问题。每个问题都可以单击并在单击时显示答案
我已经实现了以下内容,但是当一个问题打开时,上一个问题保持打开状态,而不是关闭状态。我尝试使用切换
,关闭同一链接
我的JavaScript:
$('.targetDiv').hide();
$('.show').click(function () {
$('#div' + $(this).attr('target')).toggle();
});
$('.innerdiv').hide();
$('.answer').click(function() {
$('#innerdiv' + $(this).attr('target')).toggle();
});
我的HTML:
<div style="width: 30%; float:left">
<div class="buttons">
<ul>
<li><a class="show" target="1">Placing an Order</a></li>
<li><a class="show" target="2">blah.com Returns & Cancellations FAQs</a></li>
<li><a class="show" target="3">Brands & Stock</a></li>
<li><a class="show" target="4">Shipping & Delivery</a></li>
<li><a class="show" target="5">Payment</a></li>
<li><a class="show" target="6">Pricing</a></li>
<li><a class="show" target="7">Value Added Tax (VAT)</a></li>
<li><a class="show" target="8">Privacy & Security</a></li>
<li><a class="show" target="9">About the Company</a></li>
</ul>
</div>
</div>
<div style="width: 70%; float:right">
<div id="div1" class="targetDiv">
<ul>
<li><a class="answer" target="1">I need personal assistance with my order. Who can I contact?</a><div id="innerdiv1" class="innerdiv" >Our customer service centre is happy to assist you with your order on +91 124 6733300 (10 AM - 7 PM)</div></li>
<li><a class="answer" target="2" >How do I start a new account?</a><div id="innerdiv2" class="innerdiv">blah blah </div></li>
<li><a class="answer" target="3">I am having problems ordering through your website. What can I do?</a> <div id="innerdiv3" class="innerdiv"> hahahahah </div></li>
<li><a class="answer" target="4" >I need personal assistance with my order. Who can I contact?</a> <div id="innerdiv4" class="innerdiv"> b;la ablahhap </div></li>
<li><a class="answer" target="5" >How do I start a new account?</a><div id="innerdiv5" class="innerdiv">blah blah </div></li>
</ul>
</div>
</div>
- 为什么不先选择所有的innerDiv并隐藏它们,然后再切换属于目标的innerDiv?
这就变成了:
$('.targetDiv').hide();
$('.show').click(function () {
$('#div' + $(this).attr('target')).toggle();
});
$('.innerdiv').hide();
$('.answer').click(function(){
$('.innerdiv').hide();
$('#innerdiv' + $(this).attr('target')).toggle();
});
在显示单击的InnerDiv之前,可以尝试隐藏所有InnerDiv:
$('.answer').click(function(){
$(".innerdiv").hide();
$('#innerdiv' + $(this).attr('target')).toggle();
});
更新:
也许这就是你想要的:
$(this).parent().siblings().find('div[id*=innerdiv]').hide();
这将选择所有其他#innerDiv*并将其隐藏
比如:
Thanx我用这个很容易得到答案
$('.answer').click(function(){
var $target = $('#innerdiv' + $(this).attr('target')).toggle();
$('.targetDiv .innerdiv').not($target).hide()
});
如果你设置了一个,那就太好了。它工作得很好。检查小提琴有什么问题吗?很抱歉,我再次编辑了代码。在以前的情况下,切换不起作用,我希望切换并同时隐藏两者。很抱歉,我刚刚更改了它。在您共享的小提琴中@suresh ponnukalai toggle不起作用。对我也起作用,但它用于下订单
$('.answer').click(function(){
var $target = $('#innerdiv' + $(this).attr('target')).toggle();
$('.targetDiv .innerdiv').not($target).hide()
});