Question

我有一个关于jQuery的问题 - 我正在研究大系统的菜单模拟，所以其他人可以使用它并决定如何更好地组织 - 可用性和用户体验。

菜单是多级的，每个部分都必须是可拖动的 - 因此将所有部分保留在同一页面中非常重要（我猜）。但这不是我想要的实际问题。我有子菜单的菜单，所以它通过单击菜单链接使用slideToggle（）类打开。

<script>
  $( "#terms" ).click(function() {
   $( "#1" ).slideToggle( "slow" );
  });
 $( "#tc" ).click(function() {
   $( "#tc-2" ).slideToggle( "slow" );
  });
</script>

我有很多这样的链接，所以我不想为每个链接编写代码，我想创建像

这样的东西

<script>
  $( "a" ).click(function() {
   $( "#href" ).slideToggle( "slow" );
  });
</script>

因此，通过点击链接，它只打开这个具有相同ID的div作为链接href。

抱歉蹩脚的问题，我真的不知道如何解释谷歌我想要的东西。

Answer 1

一种方法是使用HTML5数据属性...添加toggle元素的引用ID ...将相同的类添加到所有元素并使用

 $( ".elementClass" ).click(function() {
    $('#'+ $(this).data('reference')).slideToggle( "slow" );
 });

示例HTML

<div id="terms" class="elementClass" data-reference="1"></div>
<div id="1"></div>
<div id="tc" class="elementClass" data-reference="tc-2"></div>
<div id="tc-2"></div>

注意：最好将数值避免为ids。使用字符串。

Answer 2

数据引用不适用于浏览器不支持html5的地方所以使用此代码

     $( ".elementClass" ).click(function() {
        $('#'+ $(this).attr('id')+'-div').slideToggle( "slow" );
     });

example HTML

    <div id="terms-1" class="elementClass"></div>
    <div id="terms-1-div"></div>
    <div id="tc-2" class="elementClass"></div>
    <div id="tc-2-div"></div>

很多链接都有相同的jquery动画，如何更好地组织它们？

2 个答案: