Как ссылаться на div с помощью элемента li вне этого div

Question

Вначале я должен признать, что мои знания о программировании довольно просты. Я не все понимаю, так что, возможно, мой вопрос может показаться немного отстойным, но мои идеи закончились, и мне нужно спросить.

Я использовал учебник Slide Elements и добавил несколько скользящих элементов Div на свой веб-сайт, все работает отлично, но в этом руководстве автор использовал элемент button внутри родительского элемента div и щелкал по внутренним элементам div. Я хочу использовать элемент li из моего раздела навигации, который находится за пределами div, но я не знаю, как изменить код скрипта, чтобы сохранить анимацию в этом div. В основном это выглядит так:

HTML:

    <ul id="navigation">
 <li class="about"><a title="A" href="#" > </a></li>
 <li class="search"><a title="P" href="#" ></a></li>
 <li class="photos"><a title="G" href="#" ></a></li>
 <li class="rssfeed"><a title="U" href="#" ></a></li>
 <li class="contact"><a title="K" href="#" ></a></li>
</ul>

    <div id="IDcontent" class="slide" >
<button>slide it</button>
<div class="inner"  style="margin-left: 100%"> test </div>
</div>      

Мне удается изменить код скрипта, чтобы элемент li запускал действие щелчка, а не кнопку, но после щелчка он не перемещал элемент div, а перемещал следующий элемент li.

КОД СКРИПТА:

<script>

$(document).ready(function() {
  $('#navigation li').click(function() {
    var $marginLefty = $(this).next();
    $marginLefty.animate({
      marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
        $marginLefty.outerWidth() :
        0
    });
  });
});

  </script>

Любые предложения?

Большое спасибо!

Answer 1

Из-за этой строки кода,

var $marginLefty = $(this).next();

следующий элемент li после того, что было нажато, анимируется, так как вы позже делаете $marginLefty.animate(). Если вы хотите анимировать div, вы должны установить marginLefty для элемента div. Поэтому замените эту строку на:

var $marginLefty = $('.inner');

Чтобы узнать, на какую кнопку нажимали, вы можете сделать

// $(this) refers to the element that was clicked
$liClass = $(this).attr("class") 

внутри обработчика кликов. Затем вы можете изменить содержимое div в зависимости от того, на что щелкнули, и с помощью функции html(). Например,

var content;
if($liClass == 'about'){
 content = 'about clicked';
}
else if($liClass == 'search'){
    content = 'search clicked';
}
//more code here
//more code here
$marginLefty.html(content);

Вы можете найти больше информации о.attr() и.html() здесь: http://api.jquery.com/attr/ и http://api.jquery.com/html/

Answer 2

Попробуй это:

   $(document).ready(function() {
      $('#navigation li').click(function() {
        var $marginLefty = $('a', this);
        $marginLefty.animate({
          marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
            $marginLefty.outerWidth() :
            0
        });
      });
    });

Answer 3

Если я правильно понимаю, вы хотите, чтобы элемент LI делал то же самое, что и элемент button? Вы можете просто нажать на кнопку:

$(document).ready(function() {
  $('#navigation li').click(function() {
      $('#IDcontent').find('button').trigger('click');
  });
});

Ваш элемент кнопки должен остаться на странице. В основном это будет запускать любой код, прикрепленный к событию нажатия кнопки - всякий раз, когда вы нажимаете ЛЮБОЙ из ваших элементов LI. Вы можете настроить это для работы только с 1 элементом списка, изменив селектор:

  $('#navigation li.about').click(function() {
   ...
  });

Это прикрепит эту функциональность только к элементу li class="about".

Это работает, если вы планируете оставить кнопку на своей странице. Вы можете просто скрыть кнопку в CSS, но это немного неаккуратно. Если вы решите полностью удалить кнопку, просто найдите код Javascript, который использует кнопка. Это будет выглядеть так:

$('#IDcontent button').click(function(){ ... });

или что-то подобное. Затем просто переместите этот код внутри события нажатия кнопки в событие щелчка для элемента списка.