-1

完全に機能するトグルコードに資金を提供していますが、速度効果を追加して、開閉時に少し遅くしたいと思います。<p onclick="javascript:setTimeout(toggle(), 3000);">OPEN</p>代わりにこのコードを挿入しようとしました<h1>OPEN</h1>が、成功しませんでした。

私は joomla ウェブサイトを持っています。いくつかのプラグインは jquery を使用しています。Jqueryは.toggle( [duration ] [, complete ] )、JQが「Javascriptのライブラリ」であることがわかったようなものでトリックを実行できるように思われるため、以下のコードで動作するはずですが、どのように挿入すればよいかわかりません。以下のコード内に「単純に」jqueryコードを追加するだけでうまくいくかどうか、またはFTP WebサイトにいくつかのXX.jsファイルに何か他のものを追加する必要があるかどうかはわかりません（いくつかのチュートで見たように）。道に迷いました...

<script type="text/javascript">
    // <![CDATA[
    function toggle(id, link) {
        var elem = document.getElementById(id);
        var text = document.getElementById(link);
        if (elem.style.display != "none") {
            elem.style.display = "none";
            text.innerHTML = "show";
        } else {
            elem.style.display = "block";
            text.innerHTML = "hide";
        }
    }
    // ]]>

</script>
<ul>
    <li><a id="displayText" href="javascript:toggle('toggleText', 'displayText');">show</a>
        <div id="toggleText" style="display: none;">
            <h1>OPEN</h1>
        </div></li>
    <li><a id="toggler2" href="javascript:toggle('secondText', 'toggler2');">show</a>
        <div id="secondText" style="display: none;">
            <h1>OPEN</h1>
        </div></li>

</ul>

ありがとう！

4

2 に答える 2

0

joomla の場合:

1/ タグの直後に index.php を追加します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript"></script>

2/ ftp で app.js というファイルを作成し、次のように書き込みます。

var $j = jQuery.noConflict();
$(function(){
  $('#container').on('click', 'a.opener', function(){
    $(this).next().toggle('slow')
  });
});

3/ 記事のソース コードで :

<ul id="container">
  <li>
    <a class="opener">show</a>
    <div style="display: none;">
      <h1>OPEN</h1>
    </div>
  </li>

  <li>
    <a class="opener">show</a>
    <div style="display: none;">
      <h1>OPEN</h1>
    </div>
  </li>
</ul>
于 2013-04-12T13:06:53.930 に答える