Question

我有一个具有不同字段的搜索元素，还有这个#goal div。在表单/元素的底部，有两个按钮MORE和SEARCH。目标是当用户单击MORE以切换类并显示#goal的内容时，同时如果按下ENTER，则应单击SEARCH并提交表单。

HTML：

....
<div id="goal" class="well-toggle offset-top-10">
....    
</div>

<div class="offset-top-10">
    <button data-custom-toggle="#goal" class="btn btn-block btn-white" id="bntMore">
        MORE BTN
    </button>
</div>

<div class="offset-top-10">
    <button class="btn btn-block btn-white" id="btnSearch">SEARCH</button>
</div>
...

这是javascript：

$this.on('click', $.proxy(function (event) {
    event.preventDefault();
    var $ctx = $(this);
    $($ctx.attr('data-custom-toggle')).add(this).toggleClass('active');

    setTimeout(function () {
      $window.trigger('resize');
    }, 1000);

  }, $this));

如果有人有建议或技巧，我将不胜感激。

Answer 1

您可以使用onclick，请参见示例：

<button data-custom-toggle="#goal" class="btn btn-block btn-white" onclick="clickFunction(this)" id="bntMore">
   MORE BTN
</button>
<script>
        var clickFunction = function(elem) {
            event.preventdefault();
            var customToggle = elem.getAttribute('data-custom-toggle');
            $(customToggle).add(elem).toggleClass('active');
            setTimeout(function () {
                $(window).trigger('resize');
            }, 1000);
        }
</script>

如果您希望遵循最初创建的方式：

<script>
    $("[data-custom-toggle]").click(function(){
            event.preventdefault();
            var customToggle = this.getAttribute('data-custom-toggle');
            $(customToggle).add(this).toggleClass('active');
            setTimeout(function () {
                $(window).trigger('resize');
            }, 1000);
        });
</script>

或者，如果什么都不起作用：

       $("[data-custom-toggle]").click(function(){
            clickFunction(this);
            event.preventdefault();
        });

        $("[data-custom-toggle]").keydown(function(event){
            if (event.keyCode == 13) {
                clickFunction(this);
                event.preventdefault();
            }
        });

        var clickFunction = function(elem) {

            var customToggle = elem.getAttribute('data-custom-toggle');
            $(customToggle).add(elem).toggleClass('active');
            setTimeout(function () {
                $(window).trigger('resize');
            }, 1000);
        }

Answer 2

解决方案是将第一个标签替换为跨度。 CSS是相同的，但是当按下enter键时，第二个按钮标签被触发。

点击即可实现数据自定义切换，而不是进入

2 个答案: