Laravel 5如何通过下拉选择显示，隐藏div答案

【问题标题】：Laravel 5 how to show,hide div by dropdown selectionLaravel 5如何通过下拉选择显示，隐藏div
【发布时间】：2019-02-28 13:52:50
【问题描述】：

问题是如何使用下拉onclick函数显示和隐藏div。

Blockquote 问题 2 是如何通过该样式的编号获取 getElementById("")；

这是我的 CSS，我不想显示我的所有 div

<style>
#\1a{ display:none; }      // to 32...//
</style>

这是我的 JS

<script>
  function show(showid){
    document.getElementById("1").style.display="none";
    document.getElementById("2").style.display="none";
    document.getElementById("3").style.display="none";
  }
</script>

这是我的下拉菜单

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" >
      Bla bla bla
  </button>
<ul id="test" name="form_select" class="dropdown-menu">
@foreach ($topics as $topic)
    <li><a href="#" onclick="show('')" style="font-size: 11px; padding:0px; line-height: 15px;">{{ $topic->title }}</a></li>
@endforeach
</ul>
</div>

这是我的 div

@foreach($collections as $collection)
<div id="{{ $collection->id }}">
    <div class="panel panel-default">
        <table border="1" style="width:100%">
            <tbody>
                <tr>
                    <td><h4>Асуулт {{ $i++ }}.</h4><strong>{!! nl2br($question->question_text) !!}</strong></td>
                </tr>
                <tr>
                    <td><input type="hidden" class="form-control" name="questions[{{ $question->id }}]" value="{{ $question->id }}"></td>
                </tr>
                    @foreach($question->options as $option)
                <tr>
                    <td><label class="radio-inline"><input type="radio" name="answers[{{ $question->id }}]" value="{{ $option->id }}">{{ $option->option }}</label>
                </td>
                </tr>
                    @endforeach
               </tbody>
        </table>
    </div>
</div>

【问题讨论】：

$id 在@foreach($collections as $collection) 中的值是多少？ JavaScript 代码的想法是显示特定的div 并隐藏其余部分？ $topic->id 的值与$id 相同？
哦，对不起，我忘了编辑。这是$collection->id
你在使用 Bootstrap 吗？请回答我的其他问题，以便我完全了解您的需求。
是的，我正在使用引导程序 version 3.7.7 是的，我的 javascript 只是隐藏所有 div 以显示选定的 div。不，它不一样。我编辑了我的问题，请检查。我改成 $collection->id 就像 1 到 32 一样。和 div 的增量一样。
它的 $topic 和 $collection 有相同的数据吗？，你能发布你的控制器

标签： javascript html css laravel eloquent

【解决方案1】：

下拉菜单：

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true">
        Bla bla bla
    </button>
    <ul id="test" name="form_select" class="dropdown-menu">
        @foreach ($topics as $topic)
            <li><a href="#" onclick="show({{ $loop->index }})" style="font-size: 11px; padding:0px; line-height: 15px;">{{ $topic->title }}</a></li>
        @endforeach
    </ul>
</div>

我们使用$loop->index 作为增量值。它们必须等于$collection->id。

DIV：

@foreach($collections as $collection)
    <div id="{{ $collection->id }}" class="topic hidden">
        <div class="panel panel-default">
            ...
        </div>
    </div>
@endforeach

我添加了topic 类来识别所有divs（使用你想要的任何东西）并使用hidden 类隐藏所有它们。无需自定义CSS。

JavaScript：

function show(id) {
    $('.topic').addClass('hidden');
    $('#' + id).removeClass('hidden');
}

第一行将hidden 类添加到所有divs 以隐藏它们。第二个删除特定 div 的 hidden 类。
我使用了jQuery，因为您将那个库用于Bootstrap。

这一切都假定$loop->index 和$collection->id 具有相同的值。如果没有，您可以尝试将$collection->id 替换为$loop->index。

【讨论】：