이미지를 변경하고 클릭하면 숨겨진 텍스트가 표시됩니다.

Question

안녕하십니까, 내 웹 사이트에 제목 목록을 표시하고 싶습니다 (총 4 개). 숨겨진 텍스트를 추가하여 사용자가 숨겨진 텍스트를 표시하고 아이콘을 변경하는 작은 아이콘을 클릭 할 때 추가하고 싶습니다. 나는 약간의 연구를했고 내가 추가 한 코드를 찾았고 다른 타이틀을 추가하기로 결정할 때까지 나를 위해 일하고 있었다. 두 타이틀을 모두 열면 다른 사람이 나를 도와 줄 수 있을까? Thaank 당신

$(document).ready(function() { 
 
    $('.pomme').hide(); 
 

 
    var black = true; 
 
    
 
    $('html').click(function() { 
 
     $('.pomme').hide(); 
 
     $('.apple-button').removeClass("active"); 
 
     if (black === true) { 
 
      $('.apple-img').attr('src', 'https://image.noelshack.com/fichiers/2017/44/5/1509700970-ferme.png'); 
 
      black = false; 
 
     } else { 
 
      $('.apple-img').attr('src', 'https://image.noelshack.com/fichiers/2017/44/5/1509700970-ouvert.png'); 
 
      black = true; 
 
     } 
 
    }); 
 

 
    $('.apple-button').click(function (event) { 
 
     event.stopPropagation(); 
 
     $('.pomme').toggle(); 
 
     $('.apple-button').toggleClass("active"); 
 
     if (black === true) { 
 
      $('.apple-img').attr('src', 'https://image.noelshack.com/fichiers/2017/44/5/1509700970-ferme.png'); 
 
      black = false; 
 
     } else { 
 
      $('.apple-img').attr('src', 'https://image.noelshack.com/fichiers/2017/44/5/1509700970-ouvert.png'); 
 
      black = true; 
 
     } 
 
    }); 
 

 
    $('.a-propos-menu').click(function() { 
 
     $('#a-propos').show(); 
 
     $('.apple-button').removeClass("active"); 
 
     black = false; 
 
    }); 
 

 
});

body { 
 
    background-color: #cecece; 
 
} 
 
.apple-img { 
 
    width: 18px; 
 
} 
 
.apple-button { 
 
    display: inline-block; 
 
    margin-left: 11px; 
 
    width: 100%; 
 
    height: 27px; 
 
    outline: 0; 
 
    border: 0; 
 
    background: none; 
 
} 
 
.pomme { 
 

 

 
    width: 100%x; 
 
    background: white; 
 
    border-bottom-left-radius: 7px; 
 
    border-bottom-right-radius: 7px; 
 
    display: none; 
 
} 
 
.active { 
 
    background: none; 
 
} 
 
.pomme ul { 
 
    padding-left: 0; 
 
    margin: 0; 
 
} 
 
.pomme li { 
 
    list-style-type: none; 
 
    margin: 4px 0; 
 
    padding: 3px 0 3px 15px; 
 
} 
 
.pomme li:hover { 
 
    background: #1061cb; 
 
    color: white; 
 
    cursor: default; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <button class="apple-button"> 
 
     <img class="apple-img" src="https://image.noelshack.com/fichiers/2017/44/5/1509700970-ouvert.png" alt="logo apple" /> 
 
    Option société</button> 
 
    <div class="pomme"> 
 
     <ul> 
 
      <li class="a-propos-menu">Readme</li> 
 
      <li class="how-to-menu">How to?</li> 
 
     </ul> 
 
    </div> 
 
</body>

Answer 1

당신은 현재 클릭 된 요소와 같은 관련 요소, 대상 this 키워드를 사용했습니다 :이 도움이

$('.apple-button').click(function(event) { 
    event.stopPropagation(); 

    $(this).next('.pomme').toggle(); 
    $(this).toggleClass("active"); 

    $('.apple-img', this).attr('src', function(index, attr) { 
     return attr == "https://image.noelshack.com/fichiers/2017/44/5/1509700970-ferme.png" ? "https://image.noelshack.com/fichiers/2017/44/5/1509700970-ouvert.png" : "https://image.noelshack.com/fichiers/2017/44/5/1509700970-ferme.png"; 
    }); 
}); 

희망을.

$(document).ready(function() { 
 
    $('.pomme').hide(); 
 

 
    $('.apple-button').click(function(event) { 
 
    event.stopPropagation(); 
 

 
    $(this).next('.pomme').toggle(); 
 
    $(this).toggleClass("active"); 
 

 
    $('.apple-img', this).attr('src', function(index, attr) { 
 
     return attr == "https://image.noelshack.com/fichiers/2017/44/5/1509700970-ferme.png" ? "https://image.noelshack.com/fichiers/2017/44/5/1509700970-ouvert.png" : "https://image.noelshack.com/fichiers/2017/44/5/1509700970-ferme.png"; 
 
    }); 
 
    }); 
 

 
    $('.a-propos-menu').click(function() { 
 
    $('#a-propos').show(); 
 
    $('.apple-button').removeClass("active"); 
 
    black = false; 
 
    }); 
 

 
});

body { 
 
    background-color: #cecece; 
 
} 
 

 
.apple-img { 
 
    width: 18px; 
 
} 
 

 
.apple-button { 
 
    display: inline-block; 
 
    margin-left: 11px; 
 
    width: 100%; 
 
    height: 27px; 
 
    outline: 0; 
 
    border: 0; 
 
    background: none; 
 
} 
 

 
.pomme { 
 
    width: 100%x; 
 
    background: white; 
 
    border-bottom-left-radius: 7px; 
 
    border-bottom-right-radius: 7px; 
 
    display: none; 
 
} 
 

 
.active { 
 
    background: none; 
 
} 
 

 
.pomme ul { 
 
    padding-left: 0; 
 
    margin: 0; 
 
} 
 

 
.pomme li { 
 
    list-style-type: none; 
 
    margin: 4px 0; 
 
    padding: 3px 0 3px 15px; 
 
} 
 

 
.pomme li:hover { 
 
    background: #1061cb; 
 
    color: white; 
 
    cursor: default; 
 
} 
 

 
.closed { 
 
    background-image: url('https://image.noelshack.com/fichiers/2017/44/5/1509700970-ferme.png'); 
 
}

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

 
<button class="apple-button"> 
 
     <img class="apple-img" src="https://image.noelshack.com/fichiers/2017/44/5/1509700970-ouvert.png" alt="logo apple" /> 
 
    Option société</button> 
 
<div class="pomme"> 
 
    <ul> 
 
    <li class="a-propos-menu">Readme</li> 
 
    <li class="how-to-menu">How to?</li> 
 
    </ul> 
 
</div> 
 
<br> 
 
<button class="apple-button"> 
 
     <img class="apple-img" src="https://image.noelshack.com/fichiers/2017/44/5/1509700970-ouvert.png" alt="logo apple" /> 
 
    Option société</button> 
 
<div class="pomme"> 
 
    <ul> 
 
    <li class="a-propos-menu">Readme</li> 
 
    <li class="how-to-menu">How to?</li> 
 
    </ul> 
 
</div>