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() 
});

데모 :

출처

2014-05-20 08:06:52

이것은 토글 기능을 방해합니다. 이 상태에서는 토글이 작동하지 않습니다. – user3239364

@ user3239364 이것을 놓쳤습니다 :(.... 고정 –

고맙습니다 ... 지금 잘 작동합니다. – user3239364

jquery, javascript, html div 관련 검색어

답변

관련 문제