활성 요소에 내용을 추가하지만 요소가 활성 상태가 아니면 제거하고 있습니까?

Question

메뉴를 클릭하면 .active 클래스와 목록 항목 (단락) 내의 일부 내용이 추가됩니다. 활성 클래스를 추가하는 방법을 알아 냈지만 목록 항목에 더 이상 활성 클래스가 없으면 추가 내용을 제거하는 방법을 모르겠습니다.

<ul> 
    <li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li> 
    <li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li> 
    <li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a></li> 
    <li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li> 
    <li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a></li> 
</ul> 

그리고 내 jQuery를 :

$("ul li").click(function(){ 
    $(this).addClass("active").siblings().removeClass("active"); 
     $(this).append(function(){ 
      if ($(this).hasClass("active")) { 
       return "<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."; 
      } else { 
       return false; 
      } 
     }); 
}); 

이것은 .active가 추가 된 경우 원하는 단락을 추가하지만 목록 항목이 더 이상이 문제를 가지고 일단 제거하지 않습니다 여기에

내 HTML입니다 수업. 어떤 아이디어?

Answer 1

당신은 어떤 다른 li에서 p를 제거하지 않습니다 - 당신은 또한 중복 검사를 필요가 없습니다

$("ul li").click(function(){ 
    //Remove active class and remove p 
    $("ul li.active").removeClass("active").each(function() { 
     $(this).find("p").remove(); //remove old p 
    }); 

    //Add active class to element clicked and append 
    $(this).addClass("active").append(function(){ 
     return "<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."; 
    }); 
}); 

데모 : http://jsfiddle.net/8ufx60ry/

Answer 2

정말 이상적인

아니, 그러나 당신의 현재 설정과 함께, 당신 쉽게이 작업을 수행 할 수 있습니다

$("ul li").on('click', function(e){ 
 
     if($(this).is(':not(.active)')) { 
 
      $(this).addClass("active").append(function(){ 
 
       return "<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."; 
 
      }).siblings().removeClass("active").find('p').remove(); 
 
     } 
 
     
 
     // for demo purposes 
 
     e.stopPropagation(); 
 
    });

ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 2em; 
 
} 
 

 
p { 
 
    margin: 0; 
 
} 
 

 
a { 
 
    color: #C55; 
 
    text-decoration: none; 
 
} 
 

 
li.active a { 
 
    color: #55C; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.css" rel="stylesheet"/> 
 
<ul> 
 
    <li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li> 
 
    <li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li> 
 
    <li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a></li> 
 
    <li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li> 
 
    <li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a></li> 
 
</ul>