jQuery .show() not working as intended. hides well but does not show
Question
So I have this, after the user clicks on the .item_list it shows what it should, if they click .upload_items li it doesn't do anything. I am very lost as to why. here is the fiddle with more details. too much html to post here
$('.upload_items').hide();
$('.item-list').click(function() {
$(".upload_items").slideDown();
$('#node_project_form_group_document').show();
$('#edit-field-video').hide();
$('#edit-field-images-upload').hide();
});
$('.upload_items').children('li').eq(1).click(function () {
$('#node_project_form_group_document').show();
});
2 answers
solution1
1 2014-10-24 19:53:26
Wow, that's pretty knarly looking. Instead of .children('li').eq(1), try using CSS instead.
$(".upload_items li:nth-of-type(1)").click();
solution2
1 ACCPTED 2014-10-24 20:24:20
Ok - so the html you provided in the fiddle is really excessive, so instead of going through the whole thing, I created a very simple example to show/hide sections using jQuery's toggle() function, which I would recommend for this scenario since it automatically detects the target element's current visible state. Example: http://jsfiddle.net/Lv1wwfp2/2/
<body>
<ul>
<li class="clickable" data-id="1">Group 1</li>
<li class="clickable" data-id="2">Group 2</li>
<li class="clickable" data-id="3">Group 3</li>
</ul>
<div id="Group1">Group 1</div>
<div id="Group2">Group 2</div>
<div id="Group3">Group 3</div>
<script>
$(document).ready(function () {
$("div").hide();
$(".clickable").click(function () {
var id = $(this).data("id");
$("#Group" + id).toggle();
});
});
</script>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.