javascript - 单击时制作动画切换

Question

你好，我有以下...

 <span id="second" class="content1" style="width:0px; display:inline-block; overflow:hidden; float: left; white-space:nowrap;">
                    <p style="color:blue; background-color: #b5bdc8;">Camera Reviews</p>
                  </span>
                  <a href="#" class="slide1" style="float: left;"><li class="laptop"></li></a>

脚本是：

$(document).ready(function () {
          $('.slide1').click(function () {
          $('#second').animate({
               width: '120px',
           }, 1000);
       });
 });

问题是我希望列表显示为 BLOCK... 并按原样工作另外我希望动画在我单击列表隐藏/显示时切换

这里的工作代码：http: //jsfiddle.net/gVjFs/81/

Answer 1

在您的 JSFiddle 中，您表明您正在将 CSS 设置为blockfor ul li。但这不起作用，因为您的 HTML 中没有任何ul标签。您似乎也li错误地使用了标签。li标签就像一个标签td：它在其父标签之外没有意义。For li's 那将是一个ol或一个ul标签。如果您想点击一个小圆圈，请使用一个小圆圈的图像。span此外，将/a部分包装在div. 这将免费为您提供被阻止的显示。

Answer 2

我将忽略狡猾的标记（除其他外）<li>。<span>你可以toggle()在这里使用：

$('.slide1').toggle(function () {
    $('#second').stop().animate({
        width: '120px',
    }, 1000);
}, function(){
    $('#second').stop().animate({
        width: '0',
    }, 1000);
});

Answer 3

使用 click() 和toggleClass()的组合 像这样：

$("#click").click(function() {
    $(this).toggleClass('whatever');
});

Answer 4

$(document).ready(function () {
    $('.slide1, .slide2, .slide3, .slide4, .slide5').click(function () {
        var elem = $('.' + $(this).attr('class').replace('slide','content')),
            width = elem.width();
        elem.animate({
            width: width === 0 ? '120px' : 0,
        }, 1000);
    });
});

演示

我建议您为slide所有元素设置一个类.slide1, .slide2, .slide3。