Question

我有三个侧边栏按钮。在点击事件中，每个事件都会打开一个先前隐藏的div：

//Contribute Sidebar Actions
      $('#contributePod .facebookBtn, #contributeFacebook .close').click(function() {
          $('#contributeFacebook').fadeToggle('slow', function() {
        });
      });

      $('#contributePod .twitterBtn, #contributeTwitter .close').click(function() {
          $('#contributeTwitter').fadeToggle('slow', function() {
        });
      });

      $('#contributePod .flickrBtn, #contributeFlickr .close').click(function() {
          $('#contributeFlickr').fadeToggle('slow', function() {
        });
      });

这是HTML部分

<div id="contributePod">
            <h2>Contribute</h2>
            <a class="facebookBtn" href="#" title="Contribute on Facebook"></a>
            <a class="twitterBtn" href="#" title="Contribute on Twitter"></a>
            <a class="flickrBtn" href="#" title="Contribute on Flickr"></a>
        </div>


        <div class="contributeContainer" id="contributeFacebook">
            <a class="close" href="#">X</a>
            <h2>Contribute on Facebook</h2>

            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
            </p>

            <form method="post" action="" id="facebookForm" name="facebook_form">
                <label>Comment</label>
                <textarea name="facebookComment" rows="1" cols="1"></textarea>
                <input class="contribSubmit btn" type="submit" value="Share" />
            </form>
        </div> 

        <div class="contributeContainer" id="contributeTwitter">
            <a class="close" href="#">X</a>
            <h2>Contribute on Twitter</h2>

            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
            </p>

            <form method="post" action="" id="twitterForm" name="twitter_form">
                <label>Comment</label>
                <textarea name="twitterComment" rows="1" cols="1"></textarea>
                <input class="contribSubmit btn" type="submit" value="Share" />
            </form>
        </div> 

        <div class="contributeContainer" id="contributeFlickr">
            <a class="close" href="#">X</a>
            <h2>Contribute on Flickr</h2>

            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
            </p>

            <form method="post" action="" id="flickrForm" name="flickr_form">
                <input class="btn" type="file" />
            </form>
        </div>

1）我这样做的方式最有效吗？

2）我会添加什么来使其成为如果其中一个div被打开，并且用户点击以切换第二个，它会在显示第二个div之前淡出第一个打开的那个？

Answer 1

这是我对它的抨击：http://jsfiddle.net/Skooljester/FJKz7/。我必须在name代码中添加a值，但功能缩短了相当多。

Answer 2

这应该有效

将html更改为：

<div id="contributePod">
            <h2>Contribute</h2>
            <a class="contributeFacebook" href="#" title="Contribute on Facebook"></a>
            <a class="contributeTwitter" href="#" title="Contribute on Twitter"></a>
            <a class="contributeFlickr" href="#" title="Contribute on Flickr"></a>
</div>

和Javascript：

$("#contributePod a").click(function(){
      var which = $(this).attr("class");
      var $container = $("#"+which);

      $container.siblings().is(":visible").fadeOut("slow",function(){
      });

      $container.fadeIn('slow',function(){
      });

      return false;
});

$(".contributeContainer .close").click(function(){
      $(this).parent().fadeOut("slow",function(){
       });

      return false;
});

Answer 3

这也应该有用

$('#contributePod .facebookBtn, #contributeFacebook .close').toggle(
    function() {
        $('#contributeFacebook').fadeIn('slow');
         //more stuff
    },
    function() {
        $('#contributeFacebook').fadeOut('slow');
         //more stuff
    }
);

什么是最有效的jQuery方法来检查/切换三个元素的淡入淡出？

3 个答案: