如何安排菜单项？

Question

我有这个例子：

https://jsfiddle.net/y3gfd0cv/

HTML：

<div class="hhh">
<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="menu2"><img class="sageata" src="http://paul.dac-proiect.ro/wp-content/themes/wpbootstrap/images/logo-arrow.png">MENU2</p> 

</div>

JS：

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

      $('.patrat1').on('click', 'p', function () {   //aici this=p
        $('.patrat1 img').hide();
        $(this).find('img').show();
    });


}); 

我把照片更好地理解我想要做的事情：

基本上我想将菜单项保持在该位置，无论选择的项目是否。我试图添加padding-left:X value但不好。

我必须更改HTML代码吗？ 你能帮我解决一下这个想法吗？

提前致谢！

Answer 1

可以使用一些CSS规则来完成：

p{
    margin-left: 20px;
    position: relative;
}

p img{
    position: absolute;
    left: -20px;
}

FIDDLE：https://jsfiddle.net/lmgonzalves/y3gfd0cv/2/

Answer 2

我建议您创建一些自定义类并更改visibility而不是display属性，就像jQuery在show和hide方法中所做的那样。

然后您可以使用addClass和removeClass方法：

https://jsfiddle.net/y3gfd0cv/1/

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

  $('.patrat1').on('click', 'p', function () {   //aici this=p
    $('.patrat1 img').addClass( 'hidden' );
    $(this).find('img').removeClass( 'hidden' );
  });
}); 

.hidden {
    visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="hhh">
<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="menu2"><img class="sageata" src="http://paul.dac-proiect.ro/wp-content/themes/wpbootstrap/images/logo-arrow.png">MENU2</p>
</div>