javascript - 在 jQuery 中打开子菜单链接

Question

我正在处理这个

  $(document).ready(function() {
  $('#links').find('a:eq(0)').addClass('active');
  $('#linksobsah').children().hide().eq(0).show();     

  $('#links').children().click(function() {
  $('#links').find('a:eq(0)').addClass('active');
  var index = $('#links').children().index(this);
  $('#linksobsah').children().hide(100).eq(index).show(500);               
  $('#links').children().removeClass('active');
  $(this).addClass('active'); 
  });
});

JSFiddle 在这里 https://jsfiddle.net/m92rga7h/

当我点击链接 1 时，一切正常。子菜单显示，当我单击某个子菜单时，它会显示当前内容。但它不适用于链接 2，但 html 和 jQuery 中的代码仍然相同。

我怎样才能做到这一点？

Answer 1

问题是您试图在单击 link2 时显示 linksobsah 中的第一个 ul。实际上，对于链接 2，您应该在 linksobsah 中查询第二个 ul。

使用这个 $('#linksobsah ul:eq( 1 )')//索引 1 表示第二个 ul

而不是链接 2 中的 $('#linksobsah ul')。

工作 js fiddle 。 https://jsfiddle.net/taod03by/

$(document).ready(function() {
      $('#links').find('a:eq(0)').addClass('active');
    	$('#linksobsah').children().hide().eq(0).show();     
	
			$('#links').children().click(function() {
      $('#links').find('a:eq(0)').addClass('active');
      var index = $('#links').children().index(this);
      $('#linksobsah').children().hide(100).eq(index).show(500);               
			$('#links').children().removeClass('active');
      $(this).addClass('active'); 
    });
});

$(document).ready(function() {
	    $('#menulink1').children().hide();     
			$('#linksobsah ul').children().click(function() {
      $('#linksobsah ul').find('li').addClass('active');
			var index = $('#linksobsah ul').children().index(this);
      $('#menulink1').children().hide(100).eq(index).show(500);               
			$('#linksobsah ul').children().removeClass('active');
      $(this).addClass('active'); 
    });
	    });

	
$(document).ready(function() {
	   $('#menulink2').children().hide();     
		 $('#linksobsah ul:eq( 1 )').children().click(function() {
     $('#linksobsah ul:eq( 1 )').find('li').addClass('active');
		 var index = $('#linksobsah ul:eq( 1 )').children().index(this);
     $('#menulink2').children().hide(100).eq(index).show(500);               
		 $('#linksobsah ul:eq( 1 )').children().removeClass('active');
     $(this).addClass('active'); 
    });
	    });



// JavaScript Document

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="links">
<div class="link1">
<div class="linktext">Link1</div>
</div>
<div class="link2">
<div class="linktext">Link2</div>
</div>
<div class="link3">
<div class="linktext">Link3</div>
</div>
</div>
<div id="linksobsah">
<div>
<ul>
<li>Link 1 submenu 1</li>
<li>Link 1 submenu 2</li>
<li>Link 1 submenu 3</li>
</ul>
<div id="menulink1">
<div>Link 1 submenu 1 content</div>
<div>Link 1 submenu 2 content</div>
<div>Link 1 submenu 3 content</div>
</div>
</div>
<div>
<ul>
<li>Link 2 submenu 1</li>
<li>Link 2 submenu 2</li>
<li>Link 2 submenu 3</li>
</ul>
<div id="menulink2">
<div>Link 2 submenu 1 content</div>
<div>Link 2 submenu 2 content</div>
<div>Link 2 submenu 3 content</div>
</div>
</div>
<div>Content 3</div>
</div>