Question

我有这样的代码，

<div class="wrapper">
<div class="box">
    <h4 style="padding-left: 11px; padding-top: 15px;">Main title</h4>

    <div class="hideunhide">
        <h5 style="padding-left: 14px;">sub title1</h5>
        <div class="horizontal  controls">

        </div>
        <div style="display: inline-block; position: absolute; left: 30px" class="slider"></div>       
        <br>
        <br>
        <h5 style="padding-left: 14px;">sub title2</h5>
        <div class="horizontal  controls"></div>
        <div style="display: inline-block; position: absolute; left: 30px" class="slider"></div>
        <br>
        <br>
        <h5 style="padding-left: 14px;">sub title3</h5>
        <div class="horizontal  controls"></div>
        <div style="display: inline-block; position: absolute; left: 30px" class="slider"></div>     
        <br>
        <br>
    </div>
</div>
</div>

当我点击一个时，应切换（隐藏/取消隐藏）

我尝试过这样的事情，

$('.box').click(function() {
    $(this).css('display', 'none')
    $('.hideunhide').css('display', 'block')
});

但它没有用，请帮助。

小提琴：http://jsfiddle.net/ctrY4/

Answer 1

pelase看看下面的网址

Fiddler！

$(function () {
    $('.box').click(function () {
        $('.hideunhide').slideToggle();
    });
});

Answer 2

通过查看代码，您似乎需要隐藏<h4>标记。请尝试以下。

$('.box h4').click(function(){
     $(".hideunhide").slideToggle();
 });

和fiddle

Answer 3

您似乎隐藏了.box元素，它是.hideunhide元素的父元素。因此，如果父元素被隐藏，那么它的所有子元素都是不可见的，无论它们的CSS显示值如何。

你应该重新组织你的HTML。

Answer 4

你是否正在寻找隐藏真皮的切换？

解决方案是否为是：

$('.box').click(function(){
    $('.hideunhide').toggle();
});

为拟议的解决方案创建了一个小提琴：http://jsfiddle.net/ctrY4/1/

Answer 5

如果你想让.box类必须切换，那就这样做..

$('.box').on('click',function(){

$('.hideunhide').toggle();
});

Answer 6

   use code something like this :

    $('.box').click(function(){
    $('hideunhide').toggle();
    });

*Before used to this correct your html code.

Answer 7

$('h4').click(function(){
   $('.hideunhide').fadeOut(1000);
   $('.hideunhide').fadeIn(1000);
});

当您点击.hideunhide时，这将以定义的毫秒间隔隐藏和取消隐藏h4元素。

<强> Fiddle

jquery切换不起作用

7 个答案: