Question

我有这个例子：

HTML：

<div class="patrat1 inline">
    <p class="menu1"><img class="sageata" src="http://paul.dac-proiect.ro/wp-content/themes/wpbootstrap/images/logo-arrow.png">MENU1</p>
    <p class="menu1"><img class="sageata" src="http://paul.dac-proiect.ro/wp-content/themes/wpbootstrap/images/logo-arrow.png">MENU2</p>
    <p class="menu1"><img class="sageata" src="http://paul.dac-proiect.ro/wp-content/themes/wpbootstrap/images/logo-arrow.png">MENU3</p>
</div>

JS：

$(document).ready(function() {
    $('.patrat2 .content2').hide();
    $('.patrat1 p img').hide();
    $('.patrat1 p:first-child img').show();

    $('.patrat1 p').click(function() {
        var clicked = $(this);
        $('.patrat1 p img').show();
        $('.patrat1 p:first-child img').hide();
    });
});

我希望当用户点击某个项目时，箭头显示并隐藏其余部分。不幸的是，我的例子是不完整的，我现在陷入困境。

你能否就如何进行提出一些建议？

提前致谢！

Answer 1

尝试this：

$('.patrat1').on('click', 'p', function () {
    $('.sageata').hide();
    $(this).find('.sageata').show();
});

事件处理程序中的

$(this)是单击的p元素。

演示：https://jsfiddle.net/tusharj/6yg8ckno/1/

Answer 2

首先，无异常隐藏所有.sageata，然后将.sageata显示为已点击的p元素。就这样！：）

 $('.patrat1 p').click(function(){
      $(".sageata").hide();
      $('.sageata', this).show();
  });

https://jsfiddle.net/6yg8ckno/3/

如何向所选项目显示箭头？JQuery

2 个答案: