jquery toggle追加删除

时间：2016-12-27 15:55:17

标签： javascript jquery

这是一个带子菜单的菜单。我需要在单击子菜单项时，子菜单文本切换到菜单项＆＃34; Everyday＆＃34;旁边。如下图enter image description here

＆＃13;
＆＃13; 
    function renderImage() {
      var chart = this,
        point = chart.get('point'),
        imgWidth = 40,
        imgHeight = 40;

      if (!chart.dataLabelImg) {
        chart.dataLabelImg = this.renderer.image('http://icongal.com/gallery/image/57585/small_arrow_black_monotone_left.png', -1000, -1000, imgWidth, imgHeight).add(point.series.dataLabelsGroup);
      }

      chart.dataLabelImg.attr({
        x: point.graphic.x + (imgWidth - 15) / 2,
        y: point.graphic.y - (imgHeight - 10) / 2
      });
＆＃13; 
(function($) {
    $(".menu .sub-menu li a").each(function() {
        var dayName = $(this).text();
        $(this).on("click", function() {
            $(this).closest(".menu").children("li").children("a").append('<span class="day-name">' + dayName + '</span>');
        });
    });
})(jQuery);
＆＃13; 
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
}

.menu > li {
    position: relative;
}

.menu > li > a {
    background-color: #eee;
    color: #333;
    display: inline-block;
    padding: 10px 20px;
}

.menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
}

.menu .sub-menu {
    position: absolute;
    left: 0;
    background-color: #fff;
    box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease 0s;
}

.menu .sub-menu li {
}

.menu .sub-menu li a {
    color: #777;
    display: block;
    padding: 5px 10px;
}
＆＃13;
＆＃13;
＆＃13;

这就是我正在尝试的，但它不起作用。

4 个答案:

答案 0 :(得分：2)

您可以使用Javascript的join＆amp; jQuery的 - hasClass＆amp;具有toggleClass事件的on('click')方法如下：

请参阅jsFiddle

或查看下面的代码段：

$(function() {

  $('.menu .sub-menu li a').on('click', function(e) {
    
    $(this).toggleClass('selected');
    var txt = $('#title').text();
    var total_len = $('.menu .sub-menu li').length;
    var count = 0;
    var values = [];
    
    $('.menu .sub-menu li a.selected').each(function(i) {
      values.push($(this).text());
      count++;
    });
    
    if(count == total_len) {
      txt = "Every Day";
    } else {
      txt = "Every " + values.join(',');
    }
    $('#title').text(txt);

  });

})
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
}

.menu > li {
    position: relative;
}

.menu > li > a {
    background-color: #eee;
    color: #333;
    display: inline-block;
    padding: 10px 20px;
}

.menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
}

.menu .sub-menu {
    position: absolute;
    left: 0;
    background-color: #fff;
    box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease 0s;
}

.menu .sub-menu li {
}

.menu .sub-menu li a {
    color: #777;
    display: block;
    padding: 5px 10px;
}

.menu .sub-menu li a.selected {
  color: red;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="menu">
    <li>
        <a id="title" href="#">Every </a>
        <ul class="sub-menu">
            <li><a href="#">Sat</a></li>
            <li><a href="#">Sun</a></li>
            <li><a href="#">Mon</a></li>
            <li><a href="#">Tue</a></li>
            <li><a href="#">Wed</a></li>
            <li><a href="#">Thu</a></li>
            <li><a href="#">Fri</a></li>
        </ul>
    </li>
</ul>

答案 1 :(得分：1)

检查fiddle。

如下所示更改JS并将 schedule 类添加到“Everyday”锚点。

(function($) {
  var currentValue = [];

  function renderValue(){
       var content = "Everyday ";

       $('.schedule').text(content + currentValue.join(' '));
  }    

  $(".menu .sub-menu li a").each(function() {
      var dayName = $(this).text();
      $(this).on("click", function() {
          var el = $(this),
            id = el.attr('data-id');

          currentValue[id] = currentValue[id] ? undefined : el.text();
          renderValue();
      });
  });

})(jQuery);

答案 2 :(得分：1)

(function($) {
  $(".menu .sub-menu li a").on("click", function() {
    var $this = $(this);

    if (this.hasAttribute("data-selected")) {
      $this.removeAttr("data-selected");
    } else {
      $this.attr("data-selected", 'true');
    }

    $this.closest(".menu").find(" > li > a").html(fillButton);
  });

  function fillButton() {
    var options = $(this).next(".sub-menu").find("li a");
    if (options.filter("[data-selected]").length > 0) {
      if (options.length === options.filter("[data-selected]").length) {
        return "Every day";
      } else {
        var html = "Every ";
        options.filter("[data-selected]").each(function(i, el) {
          html += (i > 0) ? ", " + $(el).text() : $(el).text();
        });
        return html;
      }
    } else {
      return "Never";
    }
  }
})(jQuery);
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  text-decoration: none;
}
a[data-selected] {
  background: #f0f0f0;
}
.menu > li {
  position: relative;
}
.menu > li > a {
  background-color: #eee;
  color: #333;
  display: inline-block;
  padding: 10px 20px;
}
.menu li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
}
.menu .sub-menu {
  position: absolute;
  left: 0;
  background-color: #fff;
  box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease 0s;
}
.menu .sub-menu li {} .menu .sub-menu li a {
  color: #777;
  display: block;
  padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="menu">
  <li>
    <a href="#">Never</a>
    <ul class="sub-menu">
      <li><a href="#">Sat</a>
      </li>
      <li><a href="#">Sun</a>
      </li>
      <li><a href="#">Mon</a>
      </li>
      <li><a href="#">Tue</a>
      </li>
      <li><a href="#">Wed</a>
      </li>
      <li><a href="#">Thu</a>
      </li>
      <li><a href="#">Fri</a>
      </li>
    </ul>
  </li>
</ul>

答案 3 :(得分：0)

你也可以试试这个。您必须检查天数列表中的附加跨度是否等于总天数。

(function($) {

  $(".menu").children("li").children("a.all").hide();

  $(".menu .sub-menu li a").each(function() {
    var dayName = $(this).text();

    $(this).on("click", function() {

      var li = $(this).closest(".menu").children("li");
      if ($(".menu .sub-menu li").length == $(".menu li a.days span").length + 1 && li.children("a.all").is(":visible") == false) {
        li.children("a.days").hide();
        li.children("a.all").show();
        li.children("a.days").append('<span class="day-name">, ' + dayName + '</span>');
      } else {
        li.children("a.all").hide();
        li.children("a.days").show();

        if (li.children("a.days").children("span:contains('" + dayName + "')").length == 0) {
          li.children("a.days").append('<span class="day-name">, ' + dayName + '</span>');
        } else {
          li.children("a.days").children("span:contains('" + dayName + "')").remove();
        }
      }
    });
  });
})(jQuery);
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  text-decoration: none;
}
.menu > li {
  position: relative;
}
.menu > li > a {
  background-color: #eee;
  color: #333;
  display: inline-block;
  padding: 10px 20px;
}
.menu li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
}
.menu .sub-menu {
  position: absolute;
  left: 0;
  background-color: #fff;
  box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease 0s;
}
.menu .sub-menu li {} .menu .sub-menu li a {
  color: #777;
  display: block;
  padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="menu">
  <li>
    <a href="#" class="days">Every</a>
    <a href="#" class="all">Everyday</a>
    <ul class="sub-menu">
      <li><a href="#">Sat</a>
      </li>
      <li><a href="#">Sun</a>
      </li>
      <li><a href="#">Mon</a>
      </li>
      <li><a href="#">Tue</a>
      </li>
      <li><a href="#">Wed</a>
      </li>
      <li><a href="#">Thu</a>
      </li>
      <li><a href="#">Fri</a>
      </li>
    </ul>
  </li>
</ul>

相关问题
最新问题