Question

我创建了一个iframe来显示登录区域或注册区域。我使用.slideToggle来显示一帧而隐藏另一帧。我遇到的麻烦是，如何在显示登录框时隐藏“注册”标题。现在标题显示在框架下方。想着做一个If / Else，但不知道怎么说出来。我需要标题不要显示在我的iframe底部。这是我的代码。它在我的页面的头部。

<script type="text/javascript">
$(document).ready(function() {
    $('.open').click(function() {
        $('#login iframe#register').slideToggle(300);
        $(this).toggleClass(close);
    });
    $('.open2').click(function() {
        $('#login iframe#log').slideToggle(300);
        $(this).toggleClass(close);
    });
});
</script>

这是导航页面的大部分内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css" type="text/css">
<link rel="stylesheet" type="text/css" href="css/iframe.css">
<script src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.open').click(function() {
        $('#login iframe#register').slideToggle(300);
        $(this).toggleClass(close);
    });
    $('.open2').click(function() {
        $('#login iframe#log').slideToggle(300);
        $(this).toggleClass(close);
    });
});
</script>

<title>Kurdistan Post::Top Stories</title>
</head>
<body id="home">
<div id="wrappper">



<div id="top">

<div id="hamIcon"><img src="images/hamicon.gif" alt="Hamburger Icon for a dropdown menu"></div>     

    <div id="language">     
                <ul id="languageNav">
                        <li><a href="#">Kurdish</a></li>
                        <li><a href="#">Turkish</a></li>
                        <li><a href="#">Russian</a></li>
                    </ul>
                </div>

<div id="login">
<ul id="archiveNav">
    <li><a href="#">Archive</a></li>
    <li><a href="#">Subscribe</a></li>
    <li class="open2"><a href="#">Log in</a></li>
    <iframe src="login.html" id="log" scrolling="no"></iframe>
    <li class="open"><a href="#">Register</a></li>
    <iframe src="register.html" id="register" scrolling="no"></iframe>  
                </ul>
            </div>
        </div>

<div id="header">
<div id="dateWrap"
<p class="date"><time datetime="2014-04-26">April 26, 2014</time></p> 
                </div>


<div id="logoWrap">                 
<h1 id="logo"><img src="images/kpost-logo.gif" alt="Kurdistan Post"></h1>
                </div>


<div id="search">   
<form id="searchField">
<input name="q" placeholder="Kurdistan Post Archive">
<input type="submit" value="Go">
    </form>
     </div> 
     </div>




<div id="main-menu">
<nav id="main-nav">
<ul>
        <li><a href="#">Top Stories</a></li>
    <li><a href="#">Kurdistan</a></li>
    <li><a href="#">World</a></li>
    <li><a href="#">Economy</a></li>
    <li><a href="#">Analysis</a></li>
    <li><a href="#">Columnists</a></li>
    <li><a href="#">Commentary</a></li>
    <li><a href="#">Technology</a></li>
    <li><a href="#">Sports</a></li>
    <li><a href="#">Women</a></li>
    <li><a href="#">Life</a></li>                       
</ul>
</nav>
</div>

jQuery在使用slideToggle </li>时隐藏<li>标题

0 个答案: