0

我有一个关于 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>

因此，通过单击链接，它只会打开与链接 href 具有相同 id 的 div。

对不起，蹩脚的问题，我真的不知道如何解释谷歌我想要什么。

4

2 回答 2

1

一种方法是使用 HTML5 数据属性..向它添加切换元素的引用 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>

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

于 2013-09-27T06:21:01.820 回答
0

数据引用在浏览器不支持 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>
于 2013-09-27T06:43:37.377 回答