jQuery點擊一個DIV並隱藏所有其他DIVS檢測

我在我的網站上有一個票務系統。有幾個div顯示原始票證，然後在這些div之間嵌套的子隱藏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

類沒有被設計爲指向唯一的東西，你應該做這樣的事情：

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

那麼，這將是很容易做到你想要什麼：

$(".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

或者你也可以[創建箭頭（其它形狀）的CSS（http://css-tricks.com/examples/ShapesOfCSS /）！ – spinningarrow 2012-07-10 15:57:46

+1 @spinningarrow - 什麼帖子。 – TheBlackBenzKid 2012-07-11 08:49:17

$("[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。我不確定那是否會做任何事情。另外他們似乎是相同的。

來源

2012-07-10 14:59:07

感謝努力.. – TheBlackBenzKid 2012-07-12 09:17:50

您需要使用父元素和子元素的混合。以下是我的解決方案。查看演示並下載代碼，並對其進行修改以滿足您的需求。

You can see a demo here.的jsfiddle來源：

<!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檢測

回答

相關問題