Как я могу упорядочить элементы меню?

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>