小编tym*_*tym的帖子

我正在创建一个单击链接后出现的菜单,我正在尝试使用jQuery animate(); 功能可以将其滑入而不是仅仅显示它.

我遇到的问题是,它似乎只是在第二次尝试时激活了滑动位,尽管它看起来似乎暂停了500ms.

我已经看到了一些关于此的其他问题,但答案是"你的代码中有一个特定的错误"或"你必须在页面加载时切换或以其他方式伪造动画".我希望我的代码没有错误,我真的不想使用切换黑客只是绕过第一个动画未显示.

据推测,这应该是第一次和随后的每一次工作,所以我的问题是:如何在没有onload fix/hack的情况下让动画第一次工作？

HTML

<section id="mover">
  <div class="menu_Content">
    <div class="menu_close"> 
        <a href="#" id="closeMenu">close menu</a>
    </div>
     <h5><a href="/">[menu link]</a></h5>
     <h5><a href="/">[menu link]</a></h5>
     <h5><a href="/">[menu link]</a></h5>
     <h5><a href="/">[menu link]</a></h5>
     <h5><a href="/">[menu link]</a></h5>
     <h5><a href="/">[menu link]</a></h5>
     <h5><a href="/">[menu link]</a></h5>
  </div>
</section>
<div class="core home">
  <header>
    <div class="menu_link"> <a href="#" id="openMenu">[menu]</a></div>
  </header>
  <div class="content">
     <h1 class="big-head">[headline one]</h1>
     <p>[some content]</p>
  </div>
</div>

CSS

#mover {
    background:rgba(47, 47, 47, 1);
    min-height: 100%;
    position: absolute;
    z-index: 2;
    right: 100%;
    overflow: hidden;
    display: none; …

我正在使用CMS,它只允许某个div中的文本(HTML,如<br>,解析为<br>).使用Unicode/HTML代码很好(例如,&会生成&并@生成@),但它似乎不允许新的行/回车.如何<br>在不使用HTML的情况下放入div？

我试过了:

• 
- https://dev.w3.org/html5/html-author/charref
• 
- 文本区域中的新行
• 
- 文本区域中的新行
• 
或
或
- https://en.wikipedia.org/wiki/Newline
• 
或
或
- https://en.wikipedia.org/wiki/Newline

这是一个相同问题的小提琴(和CMS输出的HTML结构)> https://jsfiddle.net/w3p4wgcc/ ...这是不可能的吗？

我正在为用户创建一个简单的按钮(类型),以便在单击"向上"或"向下"时迭代多个选项.

我使用jQuery在每次单击后检查是否有更多的东西(或向下)并相应地更新类/样式/选择.但是,如果我更改触发"on"函数的元素的类,它仍然会触发(在单击时),即使选择器中指定的所有类都不存在(在DOM中).

在这个简化的示例中,如果单击"i.up.enabled"元素,则它的类切换".up.disabled"并且可见字段发生更改.好到目前为止.但是,如果再次单击它然后再次更新,它不应该(？),因为用于调用'on'函数的选择器是"i.up.enabled"而不是"i.up. disabled ".解决这个问题相当简单,但我想知道为什么会这样？

"on"是否从源代码而不是DOM中读取并且有更多可接受的方式吗？

HTML

<div class="wrapper">
    <div data-state="1">Number 1</div>
    <div data-state="0">Number 2</div>
    <i class="up enabled">up</i>
</div>

CSS

i {
    cursor: pointer;
}
div[data-state="0"] {
    display: none;
    padding: 0 2rem;
    border: 1px solid gray;
}
div[data-state="1"] {
    padding: 0 2rem;
    border: 1px solid gray;
}
.wrapper > * {
    display: inline-block;
    font-size: 90%;
}
i.disabled {
    color: gray;
    cursor: default;
}
i.enabled {
    color: blue;
    cursor: pointer;
}

JavaScript/jQuery

$('.wrapper i.enabled.up').on('click', function(){
    var $current = $(this).siblings('div[data-state="1"]');
    var $next …