Question

我使用JavaScript动态创建了一个树列表。它看起来像：

<ul>
  <li><img />First</li>
  <ul>
    <li>Item one</li>
    <li><img />Item two</li>
    <ul>
      <li>Something</li>
    </ul>
  </ul>
  <li>Second</li>
</ul>

我在<li>中添加了有孩子的图片。

以下是点击事件：

$('li').on({
    click: function(e) {
      if (this === e.target) {
        $(this).children('i.glyphicon').toggleClass('glyphicon-minus glyphicon-plus')
        $(this).siblings('ul').toggle('medium');
      }
    },
    mouseover: function() {
      if ($(this).siblings('ul').length > 0) {
        $(this).children('i.glyphicon').addClass('bg-button');
      }
    },
    mouseout: function() {
      $(this).children('i.glyphicon').removeClass('bg-button');
    }
  });

i是我在bootstrap中使用的图像。我的点击操作适用于<li>中的文字，但如何在<li>内为我的图片扩展此功能？

Answer 1

您可以将if条件更改为$(e.target).closest('li').is(this)

$('li:has(ul)').on({
  click: function(e) {
    if ($(e.target).closest('li').is(this)) {
      $(this).children('i.glyphicon').toggleClass('glyphicon-minus glyphicon-plus')
      $(this).children('ul').toggle('medium');
    }
  },
  mouseover: function() {
    $(this).children('i.glyphicon').addClass('bg-button');
  },
  mouseout: function() {
    $(this).children('i.glyphicon').removeClass('bg-button');
  }
});

li ul {
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><i class="glyphicon glyphicon-plus"></i>
    <img />First
    <ul>
      <li>Item one</li>
      <li><i class="glyphicon glyphicon-plus"></i>
        <img />Item two
        <ul>
          <li>Something</li>
        </ul>
      </li>
    </ul>
  </li>
  <li><i class="glyphicon glyphicon-plus"></i>
    <img />First
    <ul>
      <li>Item one</li>
      <li><i class="glyphicon glyphicon-plus"></i>
        <img />Item two
        <ul>
          <li>Something</li>
        </ul>
      </li>
    </ul>
  </li>
  <li><i class="glyphicon glyphicon-plus"></i>
    <img />First
    <ul>
      <li>Item one</li>
      <li><i class="glyphicon glyphicon-plus"></i>
        <img />Item two
        <ul>
          <li>Something</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

您的标记存在一些问题，因为ul不能是另一个child的{{1}}，您需要将其放入ul

为动态创建的列表项及其内容添加单击操作

1 个答案: