Javascript Yii2-按钮单击时显示和隐藏Div有问题

我试图隐藏和显示按钮点击div。默认情况下，我隐藏该div。单击该按钮时，它最初会工作。但我观察到，几秒钟后，div会自动隐藏或显示，而无需单击按钮

按钮

    <div class="col-xs-12 col-sm-12 left-padding">
        <?= Html::a('<i class="fa fa-search-plus"></i>'.Yii::t('app', ' Display Advanced Search'), [''], ['class' => 'btn btn-block btn-warning', 'onclick' => "advancedSearch()"]) ?>
    </div>

要隐藏或显示的Div

高级搜索

这里的问题是，事件处理程序没有绑定到侦听器要查找的相同上下文上

如果直接在html元素上绑定处理程序（如您提供的示例中所示），则处理程序将在窗口对象上可用

有一个快速修复方法；如果将处理程序显式绑定到窗口对象。这不是最干净的方法，但它解决了这个问题

<script>
window.advancedSearch = function advancedSearch() {
  var x = document.getElementById("toggleSearch");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

编辑： 我在js fiddle上创建了一个支持该行为的示例：

---

您需要使用此函数

event.preventDefault（）

来防止链接正常工作，避免重新加载页面，因为您的按钮是一个链接，每次单击时都会重新加载页面，因此您的“div”将再次隐藏

function advancedSearch() {
    event.preventDefault(); // to prevent reload the page
    var x = document.getElementById("toggleSearch");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

理由 这是因为您将url参数指定为带有空字符串的数组

['']

，而不是带有

javascript:void（0）

或

'.

的字符串

• 当你提供它时，如果你的视图加载到URL

  http://example.com/dashboard/search

  它会将相同的URL附加到锚点。类似地，提供空字符串而不是数组将把路由

  仪表板/search

  附加到锚的

  href

  。 在您的情况下，它是重新加载页面，这就是为什么您会感觉它隐藏了回来，它实际上重新加载页面并返回到初始状态

它为什么创建这些URL？

BaseHtml:：a（）

调用，后者进一步调用

• static:：toRoute（$url，$scheme）

  如果url是数组

  ['controller/action']

  或空

  [''']

• Yii:：$app->getRequest（）->getUrl（）

  如果提供的url为空字符串

  '

• 或者，如果字符串不是空的，则按原样添加字符串，如

  javascript:void（0）

  或

  “#”。

所以把你的代码改成

解决方案1 并在视图文件的顶部添加以下内容

$js=<<< JS
        $("a.advance_search").on('click',function(e){
           e.preventDefault();
            var x = document.getElementById("toggleSearch");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        });
JS;
$this->registerJs($js,\yii\web\view::POS_READY);

---

$js=它是单独显示和隐藏的，还是单击锚以外的任何位置？如果我单击它，它会显示，但仅在1秒或2秒内它会自行隐藏。请解释函数（事件）和（“MyButton”）对不起，我的英语不好
<?= Html::a('<i class="fa fa-search-plus"></i>' . Yii::t('app', ' Display Advanced Search'), '#.', ['class' => 'btn btn-block btn-warning', 'onclick' => "advancedSearch()"]) ?>

<?= Html::a('<i class="fa fa-search-plus"></i>' . Yii::t('app', ' Display Advanced Search'), '#.', ['class' => 'advance_search btn btn-block btn-warning']) ?>

$js=<<< JS
        $("a.advance_search").on('click',function(e){
           e.preventDefault();
            var x = document.getElementById("toggleSearch");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        });
JS;
$this->registerJs($js,\yii\web\view::POS_READY);