我试图隐藏并显示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



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





Java脚本



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





如何解决该问题。谢谢

最佳答案

原因

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


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


为什么创建这些URL?

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


如果URL是数组static::toRoute($url, $scheme);或为空['controller/action'],则为['']
Yii::$app->getRequest()->getUrl();如果提供的URL是空字符串''
或者,如果不为空,则按原样添加字符串,例如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);

10-05 20:58
查看更多