Question

我的<input>类型为Search，类为SearchBox。当我点击input类img时，我希望此Search切换。我已将我的html页面连接到ajax.googleapis.com提供的jQuery 1.11.1，这是我的.js文件：

$(document).ready(function () {
    $(".Search").click(function () {
        $("input.SearchBox").toggle();
    });
});

我已经使用CSS隐藏了SearchBox，如下所示：

.SearchBox {
display: none;
}

但它不起作用。有人可以帮忙吗？提前致谢。 html文件：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="keywords" content="Connet, connect, consultation online">
        <meta name="description" content="Website of Connet.">
        <meta name="author" content="Connet Developement Team">
        <meta http-equiv="content-language" content="en-US">
        <title> Connet. Connect. Through the internet. </title>
        <link rel="favicon" href="favicon.ico" />
        <link rel="stylesheet" href="/page_files/css/Main.style.css" type="text/css"/>
        <script src="/page_files/js/Default.interactivity.js"></script>
        <script src="/page_files/js/Default.proccessing.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <!--<script src="/page_files/js/jQuery3.0.0.js"></script>-->
        <script src="/page_files/data/Default.data.js" ></script>
        <script id="roughScript">
        </script>
        <noscript>
            We're sorry, but looks like we can't
            access our scripts. Refreshing might fix it.
            Check yor internet connection. If it's our
            fault we'll usually have something about it 
            in our blogs. Contact us if problem persists.
        </noscript>
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
  <body>
        <div class="Wrapper">
            <nav>
                <img src="bf" alt="tbf"/>
                <ul class="NavClass">
                    <li>
                        <a class="NavLink" onclick="location.reload();">
                            <img class="NavImg" src="/page_files/media/home-icon.png" alt="Home" />    
                        </a>
                    </li>
                    <li>
                        <a class="NavLink" onclick="open('Contact.html');">
                            <img class="NavImg" src="/page_files/media/contact-icon.png" alt="Contact" />
                        </a>
                    </li>
                    <li>
                        <a class="NavLink" onclick="open('Careers.html');">
                            <img class="NavImg" src="/page_files/media/careers-icon.png" alt="Careers" />
                        </a>
                    </li>
                    <li>
                        <a class="NavLink" onclick="open('Conroot.html');">
                            <img class="NavImg" src="/page_files/media/consult-icon.png" alt="Enter Consulation" />
                        </a>
                    </li>
                    <li>
                        <a class="NavLink" onclick="open('Loginpage.html');">
                            <img class="NavImg" src="/page_files/media/myspace-icon.png" alt="Login" />
                        </a>
                    </li>
                    <li>
                        <img class="Search" src="/page_files/media/search-icon.png" alt="Search" />
                    </li>
                    <li>
                        <input class="SearchBox" type="search" />
                    </li>
                </ul>
            </nav>
            <header>
            </header>

            <div class="Sections">
                <section class="TopSec">
                </section>
                <section class="MidSec">
                </section>
                <section class="LowSec">
                </section>
                <section class="SignIn">
                </section>
            </div>

            <footer>
            </footer>
        </div>
  </body>
</html>

如何使toggle（）适用于此元素？

0 个答案: