Question

我有菜单清单。

<div class="nav">
  <ul>
    <li>
      <a href="">1</a>
    </li>
    <li>
      <a href="">2</a>
    </li>
    <li>
      <a href="">3</a>
    </li>
  </ul>
</div>

然后我创建另一个导航，即nav2。

<div class="nav2">
  <ul>
    <li>
      <a href="">1</a>
    </li>
    <li>
      <a href="">2</a>
    </li>
    <li>
      <a href="">3</a>
    </li>
  </ul>
</div>

当我单击导航菜单下的时候。 nav2菜单的事件将单击。如何在jquery中做到这一点？我尝试在jquery中使用bind，但是我不知道如何执行此操作。我有用于查找和事件的代码。但是我对如何将其连接到nav2感到困惑。

var banlenght = $('.nav').find('li');
banlenght.each(function(){
  var ban = $(this);
  ban.click(function(){});
});

Answer 1

使用.index()获取.nav中点击项的索引，并使用.eq()通过索引选择.nav2中相关项，然后使用.click()触发点击事件< / p>

$(".nav li").click(function(){
  console.log(".nav => "+$('a', this).text());
  $(".nav2 li").eq($(this).index()).click();
});
$(".nav2 li").click(function(){
  console.log(".nav2 => "+$('a', this).text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
  <ul>
    <li>
      <a href="#">1</a>
    </li>
    <li>
      <a href="#">2</a>
    </li>
    <li>
      <a href="#">3</a>
    </li>
  </ul>
</div>
<div class="nav2">
  <ul>
    <li>
      <a href="#">1</a>
    </li>
    <li>
      <a href="#">2</a>
    </li>
    <li>
      <a href="#">3</a>
    </li>
  </ul>
</div>

Answer 2

您可以通过单击事件来完成此操作

您需要为导航栏提供相同的类，然后调用click事件并在该事件中添加函数

  $(".MyList li").click(function(){
  //Call Your Function here
  alert('Event Called')
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav MyList">
      <ul>
        <li>
          <a href="#">1</a>
        </li>
        <li>
          <a href="#">2</a>
        </li>
        <li>
          <a href="#">3</a>
        </li>
      </ul>
  </div>
<div class="nav2 MyList">
      <ul>
        <li>
          <a href="#">1</a>
        </li>
        <li>
          <a href="#">2</a>
        </li>
        <li>
          <a href="#">3</a>
        </li>
      </ul>
  </div>

如何将点击事件绑定到jQuery中的相关元素？

2 个答案: