CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Devan
Devan

Reputation: 117

How can I append only once?

I'm new in jQuery, please help me to fix this case. every time I click it, the link will multiply. how can I stop append function only once, Please help me.

$(".dl-trigger").click(function() {
  $("#ChildCat a").each(function() {
    var cat = $(this);
    $("<a />", {
      "href": cat.attr("href"),
      "text": cat.text()
    }).appendTo("#dlmenu");
  });
  $("#dlmenu").slideDown("slow");
});

FIDDLE

Upvotes: 2

Views: 944

Answers (1)

Pranav C Balan
Pranav C Balan

Reputation: 115212

Use one() method in jQuery, the handler execute once per element.

$(".dl-trigger").one('click', function() {
  $("#ChildCat a").each(function() {
    var cat = $(this);
    $("<a />", {
      "href": cat.attr("href"),
      "text": cat.text()
    }).appendTo("#dlmenu");
  });
  $("#dlmenu").slideDown("slow");
});
.clear {
  clear: both;
  float: none;
  display: block;
}
.container {
  max-width: 990px;
  width: 100%;
  margin: 0 auto;
}
.inner {
  padding: 0px 10px;
}
#main {
  margin: 10px auto;
}
.grid-two {
  width: 50%;
}
[class*='grid-'] {
  float: left;
  display: block;
  position: relative;
}
#header {
  width: 100%;
  line-height: 60px;
  background: #FFF;
  border-top: 4px solid #33AB83;
  border-bottom: 1px solid #FEFEFE;
  box-shadow: 0px 1px 1px #EEE;
  position: relative;
  left: -5px;
}
#topmenu {
  display: none;
}
span.dl-trigger {
  width: 30px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  background: #33AB83;
  color: #FFF;
  padding: 15px 15px;
  cursor: pointer;
  position: absolute;
  top: -4px;
  right: -15px;
  font-weight: bold;
}
#dlmenu {
  width: 100%;
  height: 100%;
  background: #33AB83;
  padding: 0px 15px;
  position: relative;
  left: -20px;
  top: -15px;
  display: none;
}
#dlmenu a {
  width: 100%;
  display: block;
  padding: 5px 15px;
  margin-left: -15px;
  border-top: 1px solid #2a9471;
  border-bottom: 1px solid #36b88d;
  color: #296d56;
  display: block;
  text-shadow: 1px 1px 0px #49c39a;
}
#dlmenu a:hover {
  background: #3bc094;
}
a {
  text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
  <div class="container">
    <div class="inner">
      <div id="logo" class="grid-two">
        <a title="Test Menu" href="http://localhost/">PLEASE CLICK on MENU ICON</a>
      </div>
      <!-- end of #logo -->
      <div id="navigation" class="grid-two">
        <span class="dl-trigger button green">&#9776;</span>
        <ul id="topmenu">
          <li class="ParentCat">
            <span><i class="fa fa-navicon" aria-hidden="true"></i> Parent Category</span>
            <ul id="ChildCat">
              <li><a href="http://localhost/">Category Category A</a>
              </li>
              <li><a href="http://localhost/">Category B</a>
              </li>
              <li><a href="http://localhost/">Category C</a>
              </li>
              <li><a href="http://localhost/">Category D</a>
              </li>
              <li><a href="http://localhost/">Category Category A</a>
              </li>
              <li><a href="http://localhost/">Category B</a>
              </li>
              <li><a href="http://localhost/">Category C</a>
              </li>
              <li><a href="http://localhost/">Category D</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- end of #navigation -->
      <div class="clear"></div>
    </div>
    <!-- end of .inner -->
  </div>
  <!-- end of .container -->
</header>
<!-- end of #header -->
<div id="main">
  <div class="wrapper">
    <div class="inner">
      <div id="dlmenu"></div>
    </div>
  </div>
</div>
UPDATE :

If you just want to toggle the menu on click, then you can use slideToggle() as @A.Wolff suggested.

$(".dl-trigger").click(function() {
  $("#dlmenu").slideToggle("slow");
});

$("#ChildCat a").appendTo("#dlmenu");
.clear {
  clear: both;
  float: none;
  display: block;
}
.container {
  max-width: 990px;
  width: 100%;
  margin: 0 auto;
}
.inner {
  padding: 0px 10px;
}
#main {
  margin: 10px auto;
}
.grid-two {
  width: 50%;
}
[class*='grid-'] {
  float: left;
  display: block;
  position: relative;
}
#header {
  width: 100%;
  line-height: 60px;
  background: #FFF;
  border-top: 4px solid #33AB83;
  border-bottom: 1px solid #FEFEFE;
  box-shadow: 0px 1px 1px #EEE;
  position: relative;
  left: -5px;
}
#topmenu {
  display: none;
}
span.dl-trigger {
  width: 30px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  background: #33AB83;
  color: #FFF;
  padding: 15px 15px;
  cursor: pointer;
  position: absolute;
  top: -4px;
  right: -15px;
  font-weight: bold;
}
#dlmenu {
  width: 100%;
  height: 100%;
  background: #33AB83;
  padding: 0px 15px;
  position: relative;
  left: -20px;
  top: -15px;
  display: none;
}
#dlmenu a {
  width: 100%;
  display: block;
  padding: 5px 15px;
  margin-left: -15px;
  border-top: 1px solid #2a9471;
  border-bottom: 1px solid #36b88d;
  color: #296d56;
  display: block;
  text-shadow: 1px 1px 0px #49c39a;
}
#dlmenu a:hover {
  background: #3bc094;
}
a {
  text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
  <div class="container">
    <div class="inner">
      <div id="logo" class="grid-two">
        <a title="Test Menu" href="http://localhost/">PLEASE CLICK on MENU ICON</a>
      </div>
      <!-- end of #logo -->
      <div id="navigation" class="grid-two">
        <span class="dl-trigger button green">&#9776;</span>
        <ul id="topmenu">
          <li class="ParentCat">
            <span><i class="fa fa-navicon" aria-hidden="true"></i> Parent Category</span>
            <ul id="ChildCat">
              <li><a href="http://localhost/">Category Category A</a>
              </li>
              <li><a href="http://localhost/">Category B</a>
              </li>
              <li><a href="http://localhost/">Category C</a>
              </li>
              <li><a href="http://localhost/">Category D</a>
              </li>
              <li><a href="http://localhost/">Category Category A</a>
              </li>
              <li><a href="http://localhost/">Category B</a>
              </li>
              <li><a href="http://localhost/">Category C</a>
              </li>
              <li><a href="http://localhost/">Category D</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- end of #navigation -->
      <div class="clear"></div>
    </div>
    <!-- end of .inner -->
  </div>
  <!-- end of .container -->
</header>
<!-- end of #header -->
<div id="main">
  <div class="wrapper">
    <div class="inner">
      <div id="dlmenu"></div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions