如何在jQuery中使用切换显示内容

Question

我在JQM中做了一个简单的演示。 在此演示中，按钮和文本字段占用了大量空间。

因此，我试图隐藏内容，并想在单击按钮时显示它。

我希望该内容仅在按钮单击和隐藏时显示，然后在用户单击按钮时再次显示。 给定图片，我需要切换。 这是我需要在单击按钮时切换的内容：

    <div data-role="header" data-theme="b" class="header">
        <nav>
            <ul>
                <li class="new_h"><a href="#" class="active"><i class="new"></i>New</a>
                </li>
                <li class="export_h"><a href="#"><i class="export "></i>Export</a>
                </li>
                <li class="import_h"><a href="#"><i class="import "></i>Import</a>
                </li>
                <div class="cb"></div>
            </ul>
        </nav>
    </div>

    <div data-role="content">
        <article class="testsuitbox">
            <h1>TestSuite Name</h1>
            <input name="" type="text" class="txtfield" id="testSuiteId"/>
        </article>
</div>

Answer 1

好吧，如果您需要“切换”内容，只需使用.toggle() 。

文件： http ： //api.jquery.com/toggle/

文档示例：

的HTML

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">

jQuery的

$( "#clickme" ).click(function() {
  $( "#book" ).toggle( "slow", function() {
    // Animation complete.
  });
});