Question

我在为简单的关闭div id按钮删除过于精细的jquery幻灯片效果时遇到了一些麻烦。

我只想轻弹一下 - 没有任何动画。

我的HTML：

<div class="d-all t-all m-all group following_prompt">
<button type='button' id='hideshow' value='hide/show' class="close"><span class="icon-cross black right"></span></button>
    <section class="center group">
        <h1>You're not following anyone yet</h1>
        <p>Get following to fill your feed with just the stuff you wanna see</p>
    </section>
    <article class="d1-d3 t1-t4 m-all user_following">
    {{ member:profile uid="{author}" }}
        <a href="/profile/{{ username }}" class="user_avatar d1 m1">{{ gravatamatic:quicky
          email = "{email}"
          size  = "64"
         }}</a>
            <section class="d2-d3 m2-m4 author_bio">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                <a class="global_btn_white" href="/">Follow {{ username }}</a>
            </section>
    {{ /member:profile }}
    </article>
</div>

我的JS：

jQuery(document).ready(function(){
        $('#hideshow').on('click', function(event) {        
             $('.following_prompt').toggle('show');
        });
    });

Answer 1

简单修复 - 谢谢Satish

$('.following_prompt').hide()

Answer 2

尝试使用hidden类：

.hidden {display: none;}

并使用：

$('.following_prompt').toggleClass('hidden');

Answer 3

试试这个。，

$('.following_prompt').hide()

＆＃13;

  $('#hideshow').on('click', function(event) {        
         $('.following_prompt').hide();
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="d-all t-all m-all group following_prompt">
<button type='button' id='hideshow' value='hide/show' class="close"><span class="icon-cross black right">close</span></button>
<section class="center group">
    <h1>You're not following anyone yet</h1>
    <p>Get following to fill your feed with just the stuff you wanna see</p>
</section>
<article class="d1-d3 t1-t4 m-all user_following">
{{ member:profile uid="{author}" }}
    <a href="/profile/{{ username }}" class="user_avatar d1 m1">{{ gravatamatic:quicky
      email = "{email}"
      size  = "64"
     }}</a>
        <section class="d2-d3 m2-m4 author_bio">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            <a class="global_btn_white" href="/">Follow {{ username }}</a>
        </section>
{{ /member:profile }}
</article>
</div>

＆＃13;

Answer 4

或者您可以使用$('.following_prompt').toggle();并将按钮向上移动到div之外切换，以便点击时显示/隐藏

jsfiddle

jQuery(document).ready(function(){
        $('#hideshow').on('click', function(event) {        
             $('.following_prompt').toggle();
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='button' id='hideshow' value='hide/show' class="close"><span class="icon-cross black right">Button</span></button><div class="d-all t-all m-all group following_prompt">

    <section class="center group">
        <h1>You're not following anyone yet</h1>
        <p>Get following to fill your feed with just the stuff you wanna see</p>
    </section>
    <article class="d1-d3 t1-t4 m-all user_following">
    {{ member:profile uid="{author}" }}
        <a href="/profile/{{ username }}" class="user_avatar d1 m1">{{ gravatamatic:quicky
          email = "{email}"
          size  = "64"
         }}</a>
            <section class="d2-d3 m2-m4 author_bio">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                <a class="global_btn_white" href="/">Follow {{ username }}</a>
            </section>
    {{ /member:profile }}
    </article>
</div>

删除滑动切换效果

4 个答案: