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

2023年9月4日 196次阅读

我有三个侧边栏按钮.在点击事件中,每个都打开一个以前隐藏的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之前淡出第一个打开的div？

最佳答案 这是我的破解：
http://jsfiddle.net/Skooljester/FJKz7/.我必须为你的标签添加一个名称值,但功能缩短了相当多.

点赞