多个div一键打开和关闭，div分为左右答案

【问题标题】：Multiple div open and close on a click with div divided into left and right多个div一键打开和关闭，div分为左右
【发布时间】：2014-05-20 07:42:47
【问题描述】：

我有两个divs（左和右）。如果单击左侧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/

【问题讨论】：

如果你设置了JSFiddle，那就太好了。
它工作正常..检查小提琴jsfiddle.net/zg6Kf有什么问题？
对不起，我再次编辑了代码。在以前的情况下，切换不起作用我想切换并隐藏在一起。
很抱歉我刚刚更改了它。在您分享的小提琴中，@suresh ponnukalai 切换不起作用。
也适用于我，但它适用于下订单

标签： javascript jquery html css

【解决方案1】：

更新：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

【讨论】：

【解决方案2】：

为什么不事先选择所有的 innerdiv 并隐藏它们，然后再切换属于您的目标的那个？ 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();   
});

【讨论】：

【解决方案3】：

您可以尝试在显示点击之前隐藏所有的 innerdiv：

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

【讨论】：

【解决方案4】：

谢谢，我很容易就用这个得到了答案。

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

【讨论】：