0

最初に、プログラミングに関する私の知識は非常に基本的なものであることを認めなければなりません。私はすべてを理解しているわけではないので、私の質問は少し不自由に見えるかもしれませんが、それでも私の考えは尽きており、質問する必要があります.

私は Slide Elements チュートリアルを使用し、いくつかのスライド Div を Web サイドに追加しました。すべて正常に動作しますが、このチュートリアルの作成者は、親 div 内でボタン要素を使用し、内側の div スライドをクリックしました。そのdivの外側にあるナビゲーションセクションのli要素を使用したいのですが、スクリプトコードを変更してアニメーションをその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>

何か提案はありますか？

本当にありがとう！

4

3 に答える 3

0

Try this one:

   $(document).ready(function() {
      $('#navigation li').click(function() {
        var $marginLefty = $('a', this);
        $marginLefty.animate({
          marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
            $marginLefty.outerWidth() :
            0
        });
      });
    });
于 2013-02-16T19:07:14.257 に答える
0

Because of this line of code,

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

the next li element after what was clicked on is animated since you later do $marginLefty.animate(). If you want to animate the div, you should set marginLefty to the div element. So replace that line with:

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

To find out which li was clicked, you can do 

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

inside the click handler. Then you can change the content of the div based which li was clicked, and by using the html() function. For example, 

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

You can find more information about .attr() and .html() over here: http://api.jquery.com/attr/ and http://api.jquery.com/html/

于 2013-02-16T19:09:09.230 に答える
0

私がこれを正しく理解していれば、LI 要素にボタン要素と同じことをさせたいのですか? ボタンをクリックするだけでトリガーできます。

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

または似たようなもの。次に、ボタンのクリック イベント内のコードをリスト要素のクリック イベントに移動します。

于 2013-02-16T19:14:27.040 に答える