jquery，javascript，html div相關查詢

我想創建兩個div（左和右）。如果在左側單擊鏈接，它應該打開右側div中的數據，在右側div中有多個問題。每個問題都是可點擊的，並且會在點擊時顯示答案。我已經實現了這個，但是當一個問題打開時，上一個問題不會關閉，我希望它關閉。我使用了關閉相同鏈接的切換。jquery，javascript，html div相關查詢

我的代碼如下：

$('.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> 
</html>

Fiddle

來源

2014-05-20 user3239364

隱藏innerdiv小號

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

演示：Fiddle

來源

2014-05-20 08:06:52

這會妨礙切換功能。在此情況下切換不起作用。 – user3239364

@ user3239364錯過了:(....固定 –

Thanx ...現在工作正常 – user3239364

jquery，javascript，html div相關查詢

回答

相關問題