Question

这几乎是一个初学者的问题。我为点击事件绑定了一个小字形，以显示点击的一些数据。我已经把事情绑定到事件上一百万次了，但这次它并没有因为一些有趣的原因而起作用。无论如何，点击触发器工作得很好，我已经尝试在回调中设置一个警报，它没关系，但它只是我想要显示的东西没有显示。

无论如何，这是我的代码：

<div class="options">
    <span id="resize-toggle" class="glyphicon glyphicon-resize-small valign-middle pointer" title="Resize images during the upload"></span> 
    <span id="thumb-toggle" class="glyphicon glyphicon-adjust valign-middle pointer" title="Adjust the output thumnail width measured in pixels"></span>

    <div id="thumb-options" class="hidden">
        &nbsp;
        <div class="form-group">
            <div class="btn-group mg-top" data-toggle="buttons">
                <label class="btn btn-default btn-xs"><input type="radio" id="width-90" value="90">90</label>
                <label class="btn btn-default btn-xs active"><input type="radio" id="width-110" value="110">110</label>
                <label class="btn btn-default btn-xs"><input type="radio" id="width-130" value="130">130</label>
                <label class="btn btn-default btn-xs"><input type="radio" id="width-160" value="160">160</label>
                <label class="btn btn-default btn-xs"><input type="radio" id="width-200" value="200">200</label>
            </div>
        </div>
    </div>
</div>

这是LESS：

.options {
    position: absolute;
    bottom: 10px;
    right: 10px;
    min-width: 500px;
    text-align: right;
    border: 1px solid black;

    .form-group {
        display: inline-block;
        margin: 0;
    }

    #thumb-options {
        display: inline-block;
    }
}

因此，#thumb-toggle应该会显示#thumb-options。我之前尝试过使用类，但我变得绝望，并开始尝试使用ID。

我的初衷是让收音机按钮从右侧滑动，沿途推动小字形。

有人可以帮我找到jQuery无法正常工作的问题，以及如何实现该幻灯片的正确效果？

这是我一直在使用的jQuery：

$('#thumb-toggle').click(function(){
    alert('Here we are'); // Works!
    $('#thumb-options').fadeIn('fast'); // This doesn't work
});

Answer 1

以下是描述内容的 a jsfiddle 。它是您的简化版本。

您没有显示hidden类，但问题可能是您在FadeIn元素上使用invisible。如果您希望元素不可见并因此有助于dom的布局，那么您应该使用以下内容：

$('#thumb-options').css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, 200);

如果您想使用FadeIn，那么您需要$('#thumb-options')最初拥有display:none

Answer 2

我建议只切换css类并仅使用css调整visiblity。（我也不会如此广泛地使用ID。你可以改用类。）

HTML：

<div id="thumb-toggle">Click me</div>
<div id="thumb-options" class="hidden">
  ...
</div>

使用Javascript：

var $thumb_toggler = $('#thumb-toggle');
$thumb_toggler.click(function(){
  $thumb_toggler.toggleClass('hidden');
});

首次点击$thumb_toggler，我们会从hidden元素中移除课程#thumb-options。在下一次单击时，hidden类将附加到其类列表中。

Answer 3

首先，尝试使课程“隐藏”而不是“隐藏”

<div id="thumb-options" class="hide">

如果仍然无效，请尝试：

<div id="thumb-options" style="display:none;">

jQuery没有显示点击请求的数据

3 个答案: