javascript - 使用 jQuery 在自定义 UL LI 框中触发更改事件

标签 javascript jquery html

我真的需要你的帮助。

如何修改下面的代码，以便我可以在自定义 UL LI 框中获取更改事件。例如，如果用户要对蔬菜或水果盒进行更改，代码会提醒用户已进行更改？

下面是完整的标记:

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    <style type="text/css">
      * {
        font-family: Segoe UI;
        font-size: 9pt;
      }
      .select {
        margin: 0;
        padding: 0;
      }
      .select dd, .select dt, .select ul {
        margin: 0px;
        padding: 0px;
      }
      .select dd {
        position: relative;
      }
      .select a, .select a:visited {
        color: #000;
        text-decoration: none;
        outline: none;
      }
      .select dt:hover, .select dd ul:hover {
        border-color: rgb(128,128,128);
      }
      .select dd ul li a:hover {
        background-color: rgb(112, 146, 190);
        color: #FFF;
      }
      .select dt {
        background: url(arrow.png) no-repeat scroll right center;
        display: block;
        padding-right: 20px;
        border: 1px solid rgb(170, 170, 170);
        width: 180px;
        overflow: hidden;
      }
      .select dt span {
        cursor: pointer;
        display: block;
        padding: 4px;
        height: 15px;
      }
      .select dd ul {
        background: #fff none repeat scroll 0 0;
        border-bottom: 1px solid rgb(170, 170, 170);
        border-left: 1px solid rgb(170, 170, 170);
        border-right: 1px solid rgb(170, 170, 170);
        border-top: 0;
        display: none;
        left: 0px;
        padding: 5px 0px;
        position: absolute;
        top: -1px;
        width: auto;
        min-width: 200px;
        list-style: none;
      }
      .select dd ul li a {
        padding-left: 10px;
        padding-top: 3px;
        padding-bottom: 3px;
        display: block;
      }
      .selected {
        background: rgb(195, 195, 195);
      }
      .header-list, .header-list:hover {
        padding-left: 3px;
        font-weight: bold;
        font-style: italic;
        cursor: pointer;
      }

    </style>

    <script type="text/javascript">

      $(document).ready(function() {

        $(".select dt").click(function(e) {
          e.stopPropagation();
          var select = $(this).closest('.select');
          // close all other selects
          $('.select').not(select).find('ul').hide();

          select.find('ul').toggle();
          select.find("dt, dd ul").css('border-color', 'rgb(128,128,128)')

          select.find("dt, span, dd ul").css('background-color', 'rgb(255,255,196)')

        });

        $(".select dd ul li a").click(function(e) {
          var text = $(this).html();
          var select = $(this).closest('.select');

          if ((select.data('val') == 'multiple') && (e.ctrlKey)) {
            e.stopPropagation()
            $(this).addClass('selected');
            select.find('dt span').html("(" + select.find('a.selected').length + ")");

          }
          else {
            var text = $(this).html();
            select.find("dd a").removeClass('selected');
            $(this).addClass('selected');
            select.find("dt span").html(text);
            //select.find("dt a").css("background-color", "");
            select.find("dd ul").hide();
          }
        });

        $(document).bind('click', function() {
          $(".select dd ul").hide();
          $(".select dt, .select dd ul").css('border-color', '');
        });

      });
    </script>

  </head>

  <body> 

    <dl class="select">
      <dt><span id="vegetables"></span></dt>
      <dd>
        <ul>
          <li><a href="#">&nbsp;</a></li>
          <li><a href="#">Carrots</a></li>
          <li><a href="#">Celery</a></li>
          <li><a href="#">Brocoli</a></li>
        </ul>
      </dd>
    </dl>


    <dl class="select">
      <dt><span id="fruits"></span></dt>
      <dd>
        <ul>
          <li><a href="#">&nbsp;</a></li>
          <li><a href="#">Apples</a></li>
          <li><a href="#">Oranges</a></li>
          <li><a href="#">Bananas</a></li>
        </ul>
      </dd>
    </dl>


  </body>

</html>

最佳答案

你可以使用:

$(".select ul").on('click', function(e) {
    alert('change has been made');
});

希望这有帮助。

<小时/> 

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <style type="text/css">
      * {
        font-family: Segoe UI;
        font-size: 9pt;
      }
      .select {
        margin: 0;
        padding: 0;
      }
      .select dd, .select dt, .select ul {
        margin: 0px;
        padding: 0px;
      }
      .select dd {
        position: relative;
      }
      .select a, .select a:visited {
        color: #000;
        text-decoration: none;
        outline: none;
      }
      .select dt:hover, .select dd ul:hover {
        border-color: rgb(128,128,128);
      }
      .select dd ul li a:hover {
        background-color: rgb(112, 146, 190);
        color: #FFF;
      }
      .select dt {
        background: url(arrow.png) no-repeat scroll right center;
        display: block;
        padding-right: 20px;
        border: 1px solid rgb(170, 170, 170);
        width: 180px;
        overflow: hidden;
      }
      .select dt span {
        cursor: pointer;
        display: block;
        padding: 4px;
        height: 15px;
      }
      .select dd ul {
        background: #fff none repeat scroll 0 0;
        border-bottom: 1px solid rgb(170, 170, 170);
        border-left: 1px solid rgb(170, 170, 170);
        border-right: 1px solid rgb(170, 170, 170);
        border-top: 0;
        display: none;
        left: 0px;
        padding: 5px 0px;
        position: absolute;
        top: -1px;
        width: auto;
        min-width: 200px;
        list-style: none;
      }
      .select dd ul li a {
        padding-left: 10px;
        padding-top: 3px;
        padding-bottom: 3px;
        display: block;
      }
      .selected {
        background: rgb(195, 195, 195);
      }
      .header-list, .header-list:hover {
        padding-left: 3px;
        font-weight: bold;
        font-style: italic;
        cursor: pointer;
      }

    </style>

    <script type="text/javascript">

      $(document).ready(function() {

        $(".select ul").on('click', function(e) {
          alert('change has been made');
        });

        $(".select dt").click(function(e) {
          e.stopPropagation();
          var select = $(this).closest('.select');
          // close all other selects
          $('.select').not(select).find('ul').hide();

          select.find('ul').toggle();
          select.find("dt, dd ul").css('border-color', 'rgb(128,128,128)')

          select.find("dt, span, dd ul").css('background-color', 'rgb(255,255,196)')

        });

        $(".select dd ul li a").click(function(e) {
          var text = $(this).html();
          var select = $(this).closest('.select');

          if ((select.data('val') == 'multiple') && (e.ctrlKey)) {
            e.stopPropagation()
            $(this).addClass('selected');
            select.find('dt span').html("(" + select.find('a.selected').length + ")");

          }
          else {
            var text = $(this).html();
            select.find("dd a").removeClass('selected');
            $(this).addClass('selected');
            select.find("dt span").html(text);
            //select.find("dt a").css("background-color", "");
            select.find("dd ul").hide();
          }
        });

        $(document).bind('click', function() {
          $(".select dd ul").hide();
          $(".select dt, .select dd ul").css('border-color', '');
        });

      });
    </script>

  </head>

  <body> 

    <dl class="select">
      <dt><span id="vegetables"></span></dt>
      <dd>
        <ul>
          <li><a href="#">&nbsp;</a></li>
          <li><a href="#">Carrots</a></li>
          <li><a href="#">Celery</a></li>
          <li><a href="#">Brocoli</a></li>
        </ul>
      </dd>
    </dl>


    <dl class="select">
      <dt><span id="fruits"></span></dt>
      <dd>
        <ul>
          <li><a href="#">&nbsp;</a></li>
          <li><a href="#">Apples</a></li>
          <li><a href="#">Oranges</a></li>
          <li><a href="#">Bananas</a></li>
        </ul>
      </dd>
    </dl>


  </body>

</html>

关于javascript - 使用 jQuery 在自定义 UL LI 框中触发更改事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35731343/

上一篇：javascript - 替换/限制 CKEDITOR 中的非标准字符

下一篇：javascript - 基于两个属性从 JavaScript 中的对象数组中获取唯一数组

相关文章：

javascript - 当键相同时合并 2 个对象值

jquery for 循环 : for each hovered link show related hidden div next to hovered link

css - html中字体标签的最佳替代品

html - 使用宽度 ="200"有什么区别；和宽度 ="200px"？

javascript - 使用td标签中的值字段作为html表中的隐藏字段

javascript - 连续调用多个函数

javascript - 使用 js/jquery 将 html 提取到包装 div 中的两个字符串(在 br 标签上分割)

javascript - 第一次单击时播放关键帧动画，第二次单击时反向播放

jquery - 单击时添加和删除 CSS

javascript - 为什么在 Chrome 中输入更改时 TEXTAREA 的 scrollHeight 错误？

©2024 IT工具网  联系我们