jQuery 하나의 DIV 클릭하고 다른 DIVS 감지 모두 숨기기

내 사이트에 티켓 시스템이 있습니다. 원래 티켓을 보여준 여러 div와 고객과 직원의 상호 작용을 보여주는이 div 사이에 중첩 된 하위 숨겨진 div가 있습니다. 하나의 div를 열고 다른 것을 닫은 다음 다른 div를 열면 다른 모든 div가 닫히고 닫힌 버튼이 표시됩니다.jQuery 하나의 DIV 클릭하고 다른 DIVS 감지 모두 숨기기

jQuery(document).ready(function() { 
    // ****** Click the ticket DIV 
    $(".ticket_thread_7").click(function() { 

     // Slide the SUB DIVs associated with this ticket 
     $(".ticket_threads_7").slideDown("slow"); 

     // Turn the arrow from DOWN.png to UP.png 
     $('.ticket_arrow_7').attr("src", "http://cdn.com/assets/imgs/up.png"); 

    // ****** If they have click the arrow again  
    }, function() { 

     // .. close this ticket 
     $(".ticket_threads_7").slideDown("slow"); 

     // .. also return the image back to normal 
     $('.ticket_arrow_7').attr("src", "http://cdn.com/assets/imgs/up.png"); 

     return false; 
    }); 
});

html로

<div class="ticket_thread_7"> 
    <p>I want to return my order <img src="http://cdn.com/assets/imgs/up.png" class="ticket_arrow_7"></p> 
    <div class="ticket_threads_7" style="display:none"> 

     <div class="staff_7_1"><p>We cannot accept a return on this item.</p></div> 
     <div class="cus_7_2"><p>Why not.</p></div> 
     <div class="staff_7_3"><p>Please visit cdn.com/returnterms to see our policy, apologies.</p></div> 

    </div> 
</div>

이 현재 솔루션은 잘 작동합니다. 네가 상상할 수 있듯이. 이것은 PHP로 구동되는 동적 사이트이므로 사이트에 많은 티켓이 있습니다. jQuery에서 알고 싶습니다. 명령을 사용하여 페이지의 다른 DIV 요소 ID를 모두 숨길 수 있습니다.

그래서 나는 같은 것을 할 수 있습니다 : 그들은 화살표를 클릭 할 때

// Hide all other current open threads and reset their arrows 
$(".ticket_threads_7*!=7").slideDown("slow"); 
$('.ticket_arrow_'*!=7).attr("src", "http://cdn.com/assets/imgs/up.png");

그래서, 개방 경우 모든 다른 스레드가 닫히고 화살표가 초기화되고이 하나가 열립니다.

출처

2012-07-10 TheBlackBenzKid

클래스가이 같은 일을해야한다, 독특한 무언가를 가리 키도록 설계되지 않았습니다, 또한

$(".ticket_thread").not(this).find('.details').slideDown("slow"); 
$(".ticket_thread").not(this).find('.arrow').attr("src", "http://cdn.com/assets/imgs/up.png");

주세요 화살표를 디자인하려면 클래스와 CSS sprites을 사용하는 것이 좋습니다.

출처

2012-07-10 14:59:40

또는 당신은 할 수 있습니다 (http://css-tricks.com/examples :

You can see a demo here. JsFiddle 소스/ShapesOfCSS /)! – spinningarrow

+1 @spinningarrow - 무슨 소식. – TheBlackBenzKid

$("[class^=ticket_threads]").click(function() { 
    //your code 
    $("[class^ticket_threads]").not(this).hide(); 
    $("[class^ticket_arrow]").not($(this).siblings("[class^=ticket_arrow")) 
     .attr('src' ...) 
});

당신은 핸들러의 모든 하지만 현재 요소를 선택하려면이 같은 것을 사용할 수 있습니다.

click의 두 인수가있는 이유가 확실하지 않습니다. 그게 아무것도하지 않는다고 확신합니다. 게다가 그들은 똑같은 것처럼 보입니다. 당신이 원하는 일을하기 쉬운 것입니다, 그리고

<div class="ticket_thread" id="ticket_thread_7"> 
    <p>...<img class="arrow" /></p> 
    <div class="details"> 
     ... 
    </div> 
</div>

출처

2012-07-10 14:59:07

감사합니다 .. – TheBlackBenzKid

상위 요소와 하위 요소가 혼합되어 있어야합니다. 다음은 내가 가진 해결책입니다. 데모를보고 코드를 다운로드하고 필요에 맞게 수정하십시오. [CSS와 (다른 모양들) 화살표를 만들] 노력

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html> 
     <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
      <title>Test</title> 
      <style type="text/css"> 
       h1{text-decoration:underline;padding:5px;cursor:pointer} 
      </style> 
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
      <script type="text/javascript"> 
      $(document).ready(function() { 
       /*bind all clicks on an 'h1' element to trigger this function*/ 
       $('h1').click(function() { 
        /*if the element following this one has the class 'parent' and the class 'showMe'*/ 
        if($(this).next('.parent').hasClass('showMe')) { 
         /*remove the class 'showMe' from all elements with the class 'parent' or 'child'*/ 
         $('.parent, .child').removeClass('showMe').hide(); 
        } 
        /*if the element following this one has the class 'parent' and does not have the class 'showMe'*/ 
        else { 
         /*remove the class 'showMe' from all elements with the class 'parent' or 'child'*/ 
         $('.parent, .child').removeClass('showMe').hide(); 
         /*add the class 'showMe' to the element following this one with the class 'parent'*/ 
         $(this).next('.parent').addClass('showMe').show(); 
        } 
       }); 
       /*bind all clicks on an 'h2' element to trigger this function*/ 
       $('h2').click(function() { 
        /*if the element following this one has the class 'child' and the class 'showMe'*/ 
        if($(this).next('.child').hasClass('showMe')) { 
         /*remove the class 'showMe' from all elements with the class 'child'*/ 
         $('.child').removeClass('showMe').hide(); 
        } 
        else { 
         /*remove the class 'showMe' from all elements with the class 'child'*/ 
         $('.child').removeClass('showMe').hide(); 
         /*add the class 'showMe' to the element following this one with the class 'child'*/ 
         $(this).next('.child').addClass('showMe').show(); 
        } 
       }); 
       /*hide all elements with the class 'parent' or 'child'*/ 
       $('.parent, .child').hide(); 
       /*simulate a click on the first 'h1' element and the first 'h2' element within that 'h1' element*/ 
       $('h1:first, h1:first h2:first').click(); 
      }); 
      </script> 
     </head> 
     <body> 
      <h1>Yacht 1</h1> 
      <div class="parent"> 
       <h2>Description 1.1</h2> 
       <div class="child"> 
        <p>Content 1.1</p> 
        <p>Ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat. Ullamco laboris nisi quis nostrud exercitation lorem ipsum dolor sit amet. Cupidatat non proident, duis aute irure dolor eu fugiat nulla pariatur. Ut labore et dolore magna aliqua.</p> 
       </div> 
       <h2>Images</h2> 
       <div class="child"> 
        <p>Content 1.2 Images here</p> 
        <p>Ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat. Ullamco laboris nisi quis nostrud exercitation lorem ipsum dolor sit amet. Cupidatat non proident, duis aute irure dolor eu fugiat nulla pariatur. Ut labore et dolore magna aliqua.</p> 
       </div> 
       <h2>Extras</h2> 
       <div class="child"> 
        <p>Content 1.3</p> 
        <p>Ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat. Ullamco laboris nisi quis nostrud exercitation lorem ipsum dolor sit amet. Cupidatat non proident, duis aute irure dolor eu fugiat nulla pariatur. Ut labore et dolore magna aliqua.</p> 
       </div> 
      </div> 
      <h1>Yacht 2</h1> 
      <div class="parent"> 
       <h2>Description 2.1</h2> 
       <div class="child"> 
        <p>Content 2.1</p> 
        <p>Sed quia consequuntur magni dolores eos et aut officiis debitis aut rerum necessitatibus tempora incidunt ut labore et dolore. Omnis dolor repellendus. Itaque earum rerum hic tenetur a sapiente delectus, iste natus error sit voluptatem ut enim ad minima veniam.</p> 
        <p>Magnam aliquam quaerat voluptatem. Qui ratione voluptatem sequi nesciunt. Nisi ut aliquid ex ea commodi consequatur? Sed quia non numquam eius modi id est laborum et dolorum fuga.</p> 
       </div> 
       <h2>Images 2.2</h2> 
       <div class="child"> 
        <p>Images here 2.2</p> 
        <p>Ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat. Ullamco laboris nisi quis nostrud exercitation lorem ipsum dolor sit amet. Cupidatat non proident, duis aute irure dolor eu fugiat nulla pariatur. Ut labore et dolore magna aliqua.</p> 
       </div> 
       <h2>Extras 2.3</h2> 
       <div class="child"> 
        <p>Content 2.3</p> 
        <p>Ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat. Ullamco laboris nisi quis nostrud exercitation lorem ipsum dolor sit amet. Cupidatat non proident, duis aute irure dolor eu fugiat nulla pariatur. Ut labore et dolore magna aliqua.</p> 
       </div> 
      </div> 
     </body> 
    </html>

출처

2012-07-12 09:10:38 AlphaApp

jQuery 하나의 DIV 클릭하고 다른 DIVS 감지 모두 숨기기

답변

관련 문제