多个div打开和关闭点击与div分为左和右

我有两个div s（左和右）。如果点击左边的div链接，它应该在有多个问题的地方打开右边的div中的数据。每个问题都是可点击的，并在点击时显示答案。多个div打开和关闭点击与div分为左和右

我已经执行了以下操作，但是当问题打开时，上一个问题保持打开并且不会关闭。我尝试使用关闭相同链接的toggle。

我的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>

见的jsfiddle：http://jsfiddle.net/C59bE/8/

来源

2014-05-20 user3239364

如果您设置了[JSFiddle]（http://jsfiddle.net），那会很好。 – Ruddy

似乎工作给我 – paulalexandru

它工作正常..检查小提琴http://jsfiddle.net/zg6Kf/有什么问题？ –

UPDATE：WORKING DEMO

也许这是你在找什么：

$(this).parent().siblings().find('div[id*=innerdiv]').hide();

这会选择所有其他＃innerdivs *并隐藏它。

像：

$('.targetDiv').hide(); 
    $('.show').click(function() { 
     $('#div' + $(this).attr('target')).toggle(); 
    }); 
    $('.innerdiv').hide(); 
    $('.answer').click(function(){ 
    $(this).parent().siblings().find('div').hide(); 
    $('#innerdiv' + $(this).attr('target')).toggle(); 
    });

WORKING DEMO

来源

2014-05-20 08:11:23 reuelab

Works fine..thnx – user3239364

为什么不选择所有innerdivs事先和隐藏，切换属于一个前到你的目标？ http://jsfiddle.net/C59bE/9/

这样就变成了：

$('.targetDiv').hide(); 
    $('.show').click(function() { 
     $('#div' + $(this).attr('target')).toggle(); 
    }); 
$('.innerdiv').hide(); 
$('.answer').click(function(){ 
    $('.innerdiv').hide(); 
$('#innerdiv' + $(this).attr('target')).toggle(); 
});

来源

2014-05-20 08:02:23 roobeedeedada

切换不起作用 – user3239364

您可以尝试显示一个点击前隐藏所有innerdivs：

$('.answer').click(function(){ 
    $(".innerdiv").hide(); 
    $('#innerdiv' + $(this).attr('target')).toggle(); 
});

来源

2014-05-20 08:04:54 legolandbridge

感谢名单我用这个很容易回答。

$('.answer').click(function(){ 
    var $target = $('#innerdiv' + $(this).attr('target')).toggle(); 
    $('.targetDiv .innerdiv').not($target).hide() 
});

来源

2014-05-20 09:07:22 user3239364

多个div打开和关闭点击与div分为左和右

回答

相关问题