Yii2-在按钮单击上显示和隐藏Div出现问题

Question

我试图在单击按钮时隐藏并显示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 id="toggleSearch" class="col-xs-12" style="display:none">
    <div class="box"> 
        <div class="box-body table-responsive">
            <div class="col-xs-12">
                <h4><strong><u>Advanced Search</u></strong></h4>
            </div>
   <?php $form = ActiveForm::begin([
       'enableAjaxValidation' => false,
   'method' => 'get']); ?>
<div class="col-xs-12 col-lg-12 no-padding"> 
    <div class="col-xs-12 col-sm-6 col-lg-6">
          <?= $form->field($searchModel, 'zonal_office_id')->widget(Select2::classname(), [
                'data' => ArrayHelper::map(app\models\ZonalOffice::find()->all(),'id','zonal_office_name'),
                'language' => 'en',
                'options' => ['placeholder' => 'Select Zonal Office ...'],

             //   'disabled'=>'true',
                'pluginOptions' => [
                    'allowClear' => true
                ],
            ]); ?>        
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-6">
  	<?= $form->field($searchModel, 'state_name')->textInput(['maxlength' => 100, 'placeholder' => $searchModel->getAttributeLabel('state_name')]) ?>
    </div>   
</div>
<div class="col-xs-12 col-lg-12"> 
    <div class="form-group">
        <?= Html::submitButton('Click to Search', ['class' => 'btn btn-success']) ?>
    </div>
</div>

    <?php ActiveForm::end(); ?>  
</div>
</div>
</div>

JavaScript

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

我该怎么做才能解决问题。谢谢

Answer 1

原因

这是因为您将url参数分配为具有空字符串的数组['']，而不是具有javascript:void(0)或'#.'的字符串。

• 在提供['']时，它将创建与您所在页面相同的URL，这意味着如果视图加载到URL http://example.com/dashboard/search上，则会将相同的URL附加到锚点上。类似地，提供空字符串而不是数组会将路由dashboard/search附加到锚点的href。 在您的情况下，它正在重新加载页面，这就是为什么您感觉到它被隐藏了，实际上是重新加载了页面并返回到初始状态。

为什么要创建这些URL？

BaseHtml::a()调用Url::to($url);，进一步调用

• static::toRoute($url, $scheme);，如果网址是数组['controller/action']或空['']。
• Yii::$app->getRequest()->getUrl();，如果提供的网址是空字符串''。
• 或者如果不为空，则按原样添加字符串，例如javascript:void(0)或'#.'

因此将您的代码更改为

解决方案1 ​​

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

解决方案2

或使用jquery绑定javascript，但首先将名称为advance_search的类添加到锚点，然后从锚点中删除onclick属性。

<?= 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);

Answer 2

这里的问题是事件处理程序未与侦听器寻找的上下文绑定在一起。

如果直接在html元素上绑定处理程序（如您提供的示例中所示），则该处理程序应该可以在window对象上使用。

有一个快速解决方案；如果将处理程序显式绑定到window对象。这不是最干净的方法，但是可以解决此问题。

<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>

一种更干净的方法是在页面加载完成后，为项目提供id属性，并将处理程序绑定到DOM元素上。

例如：

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

document.addEventListener("DOMContentLoaded", function(event) {
  document.getElementById("MyButton").onclick = advancedSearch;
});
</script>

编辑： 我在支持该行为的js小提琴上放了一个示例： https://jsfiddle.net/rv20yq7k/

Answer 3

您需要使用此功能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";
    }
}