CODEWITHSUNDEEP
javascriptjquery
morshed
morshed

Reputation: 315

jquery toggle append remove

Here is a menu with submenu. I need that when I click on the submenu item, submenu text toggle beside menu item "Everyday". Like the image below enter image description here

(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);
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="#">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>

This is what I'm trying, but its does not work.

Upvotes: 1

Views: 1089

Answers (4)

Saumya Rastogi
Saumya Rastogi

Reputation: 13699

You can use Javascript's join & jQuery's - hasClass & toggleClass methods with on('click') event like this:

See jsFiddle

or see the code snippet below:

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

Upvotes: 2

Bram Vanroy
Bram Vanroy

Reputation: 28505

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

Upvotes: 1

Deep
Deep

Reputation: 9794

You can try this as well. you will have to check if the appended span in the days list is equal to total days.

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

Upvotes: 0

Artem Lopatiy
Artem Lopatiy

Reputation: 938

Check this fiddle.

Change JS as below and add schedule class to the "Everyday" anchor.

(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);

Upvotes: 1

Related Questions