多個實例的jQuery滑動面板

我有一段很好的代碼，您可以單擊一個觸發一個滑動div的按鈕。多個實例的jQuery滑動面板

$(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

來源

2016-10-11 webmonkey237

你有沒有考慮使用只有一個面板，而是交換內容？ – charlietfl

我打開更好的方式，不幸的是，我仍然在學習jQuery的過程中，在Stack和其他在線資源的幫助下寫這樣的東西，我不知道從哪裏開始，但我會很高興剛剛獲得當前腳本調整了，我一直在攪亂與「。每個」，但沒有成功地得到它的工作。 – webmonkey237

您可以在使用數據屬性和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

來源

2016-10-11 23:27:12

是的，我看到很多正在使用的數據屬性，感謝幫助，這是完美的。 – webmonkey237

使用這個我發現了一個小故障，當面板展開後，如果你關閉面板，你不能返回到前一個面板點擊名稱，是否容易實現一個切換，以便關閉和下一個打開，再次感謝您的幫助。 – webmonkey237

這裏是一個非常快速和骯髒的路要走關於它：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); 
     }); 
    }); 
});

來源

2016-10-11 23:40:47 Adrianopolis

多個實例的jQuery滑動面板

回答

相關問題