在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小提琴。 https://jsfiddle.net/taod03by/

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用class="menulink"代替id，因为ID对整个文档来说是唯一的

＆＃13;

＆＃13;

$(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() {
  $('.menulink').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').children().click(function() {
    $('#linksobsah ul').find('li').addClass('active');
    var index = $('#linksobsah ul').children().index(this);
    $('.menulink').children().hide(100).eq(index).show(500); //change with class instead of id
    $('#linksobsah ul').children().removeClass('active');
    $(this).addClass('active');
  });
});



// JavaScript Document

＆＃13;

<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" class="menulink"><!--class name-->
      <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" class="menulink">
      <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>

＆＃13;

＆＃13;

＆＃13;