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

时间:2015-05-26 13:13:40

标签: javascript jquery html

我有这个例子:

https://jsfiddle.net/6yg8ckno/

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

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

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

提前致谢!

2 个答案:

答案 0 :(得分:4)

尝试this

$('.patrat1').on('click', 'p', function () {
    $('.sageata').hide();
    $(this).find('.sageata').show();
});
事件处理程序中的

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

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

答案 1 :(得分:1)

首先,无异常隐藏所有.sageata,然后将.sageata显示为已点击的p元素。就这样! :)

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

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