jQuery单击一个DIV并隐藏所有其他DIVS检测
[英]jQuery click one DIV and hide all other DIVS detect
问题描述
I have a ticket system on my site. 
我的网站上有售票系统。 There are several divs which show the original ticket and then sub hidden divs nested between these divs which show the customer and staff interaction. 有几个div显示原始票证，然后是嵌套在这些div之间的子隐藏div，它们显示了客户和员工的互动。 I want to open one div, and close the others and then if they open the other div this and all other divs close showing the one they clicked open. 我想打开一个div，然后关闭其他div，然后如果他们打开另一个div，则所有其他div都关闭，显示他们单击打开的那个。
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;
});
});
The HTML 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>
This current solution works fine. 当前解决方案工作正常。 As you can imagine though. 可以想象。 This is a dynamic PHP driven site so we have many tickets on the site. 这是一个动态的PHP驱动网站，因此我们在网站上有很多票证。 I want to know in jQuery can I use a command to get all other DIV Element Ids on the page and hide them. 我想知道在jQuery中我可以使用命令来获取页面上的所有其他DIV元素ID并将其隐藏。
So can I do something like this: 所以我可以做这样的事情：
// 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");
So when they click the arrow, ALL other threads, will close if open and the arrows will be reset and this one will open. 因此，当他们单击箭头时，所有其他线程都将在打开时关闭，并且箭头将被重置，并且该箭头将打开。
3 个解决方案
解决方案1
5 已采纳 2012-07-10 14:59:40
Class is not designed to point to something unique, you should do something like this : 类并非旨在指向独特的东西，您应该执行以下操作：
<div class="ticket_thread" id="ticket_thread_7">
<p>...<img class="arrow" /></p>
<div class="details">
...
</div>
</div>
Then, it will be easy to do what you want : 然后，轻松完成您想做的事情：
$(".ticket_thread").not(this).find('.details').slideDown("slow");
$(".ticket_thread").not(this).find('.arrow').attr("src", "http://cdn.com/assets/imgs/up.png");
Also, please consider using classes and CSS sprites to design the arrow. 另外，请考虑使用类和CSS精灵来设计箭头。
解决方案2
1 2012-07-10 14:59:07
$("[class^=ticket_threads]").click(function () {
//your code
$("[class^ticket_threads]").not(this).hide();
$("[class^ticket_arrow]").not($(this).siblings("[class^=ticket_arrow"))
.attr('src' ...)
});
You can use something like this to select all but the current element in the handler. 您可以使用类似这样所有选择， 但在处理当前元素。
I'm also not sure why you have the two arguments to click . 我也不确定为什么要click两个参数。 I'm not sure that that does anything. 我不确定该做什么。 Plus they seem to be identical. 另外，它们似乎是相同的。
解决方案3
0 2012-07-12 09:10:38
You need to use a mixture of Parent Elements and also child elements. 您需要混合使用父元素和子元素。 Below is a solution I have. 下面是我有一个解决方案。 See the demo and download the code and just modify it around to suit your needs. 查看演示并下载代码，然后对其进行修改以适应您的需求。
You can see a demo here. 您可以在此处查看演示。 JsFiddle source: 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.