Question

我有一段效果很好的代码，你可以点击一个触发一个滑动div的按钮。

$(document).ready(function () {
$('div.shareTab').on('click', function () {
    $('.sharePanel').animate({
        'width': 'show'
    }, 1000, function () {
        $('.shareFade').fadeIn(100);
    });
});
$('.shareClose').on('click', function () {
    $('div.shareFade').fadeOut(100, function () {
        $('.sharePanel').animate({
            'width': 'hide'
        }, 1000);
    });
});
});

我有一个不同的项目需要多个按钮和多个面板，是否有更好的方法来编写我的脚本而不是仅仅多次复制/粘贴脚本。

我在下面提供了一个小提示，以显示我想要实现的目标，此时点击其中一个名称会立即打开所有面板。

FIDDLE

Answer 1

您可以使用数据属性和jquery上的一些技巧来实现：

$(document).ready(function() {
  $("a.shareTab").each(function(index, item) {
    $(this).on("click", function() {
      $('.sharepanel' + $(item).data("panel")).animate({
        'width': 'show'
      }, 1000, function() {
        $('.sharepanel' + $(item).data("panel") + ' .shareFade').fadeIn(100);
      });
    });
  });

  $('.shareClose').on('click', function() {
    $('div.shareFade').fadeOut(100, function() {
      $('.sharePanel').animate({
        'width': 'hide'
      }, 1000);
    });
  });
});

这是小提琴叉： fiddle

Answer 2

这是一个非常快速和肮脏的方式：https://jsfiddle.net/e1szqj20/3/

<ul>
    <li><a class="shareTab" data-panel-open="#john_panel">John</a></li>
    <li><a class="shareTab" data-panel-open="#steve_panel">Steve</a></li>
    <li><a class="shareTab" data-panel-open="#bob_panel">Bob</a></li>
</ul>

<div class="sharePanel" id="john_panel">
        <div class="shareFade">
            <span class="shareClose" data-close-panel="#john_panel">x</span>
            <div>John's Panel</div>
        </div>
</div>
<div class="sharePanel" id="steve_panel">
        <div class="shareFade">
            <span class="shareClose" data-close-panel="#steve_panel">x</span>
            <div>Steve's Panel</div>
        </div>
</div>
<div class="sharePanel" id="bob_panel">
        <div class="shareFade">
            <span class="shareClose" data-close-panel="#bob_panel">x</span>
            <div>Bob's Panel</div>
        </div>
</div>

修改后的jQuery：

$(document).ready(function () {
    $('a.shareTab').on('click', function () {
        panel = $(this).attr('data-panel-open');
        $(panel).animate({
            'width': 'show'
        }, 1000, function () {
            $(panel +' .shareFade').fadeIn(100);
        });
    });
    $('.shareClose').on('click', function () {
        panel = $(this).attr('data-close-panel');
        $(panel+' .shareFade').fadeOut(100, function () {
            $(panel).animate({
                'width': 'hide'
            }, 1000);
        });
    });
});

用于多个实例的jQuery滑动面板

2 个答案: