2014-05-20 45 views
0

我想創建兩個div(左和右)。如果左側單擊鏈接,它應該打開右側div中的數據,右側div中有多個問題。每個問題都是可點擊的,它會在點擊時顯示答案。 我已經實現了這一點,但是當一個問題打開時,上一個問題將不會關閉,我希望它關閉。我使用了關閉相同鏈接的切換。 我的代碼如下無法關閉所有切換的divs

$('.targetDiv').hide(); 
    $('.show').click(function() { 
     $('.targetDiv').hide(); 
     $('#div' + $(this).attr('target')).toggle(); 
    }); 
$('.innerdiv').hide(); 
$('.answer').click(function(){ 
    $('.innerdiv').hide(); 
$('#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> 
+1

你忘了粘貼代碼 – asprin

+0

將代碼粘貼到此處。 – paulalexandru

+0

..或在http://jsfiddle.net/ –

回答

0

試試這個: 你必須先通過下ul所有li項目迭代和「關閉」它們

$('.answer').click(function(){ 
    $(this).closest('ul').find('li').find('.innerdiv').hide(); 
    $('#innerdiv' + $(this).attr('target')).toggle(); 
});