点击

Question

您好我想在我的网站上提供一个标题列表（总共4个）。我想添加一个隐藏文本，这样当用户点击小图标时，它会显示隐藏文本并更改图标。我做了一些研究并找到了一些我添加的代码，它一直在为我工作，直到我决定添加另一个标题，我点击一个标题，两个都打开，有人可以帮我吗？ Thaank you

＆＃13;

＆＃13;

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

});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>