Как вы можете видеть ниже, у меня есть (на мой взгляд) два красиво стилизованных варианта на выбор. Это переключатели, отображаемые как кнопки начальной загрузки.
Два раздела ниже должны быть скрыты и отображаться только при выборе соответствующей опции.
Вот где я врезался в стену. Я пробовал через CSS, JQuery, JavaScript onClick, Bootstrap collapse. Ничего не работает.
Создание представления пользователя
data-toggle="buttons" кажется виновником. Тем не мение...
Без этого скрытия / показа, свертывание работает, но кнопки не остаются в выбранном / проверенном состоянии.
С этим на месте кнопки работают нормально, но показ / скрытие соответствующих разделов не работает.
Кто-нибудь преодолевал подобную проблему или знает ответ?
Код:
<div class="row justify-content-center">
<div class="form-group col-md-4">
<label for="type">User type:</label>
<div class="row justify-content-center btn-group-toggle" data-toggle="buttons">
<label class="col-4 btn btn-outline-primary">
<input type="radio" name="type" value="Employee" autocomplete="off">Employee
</label>
<label class="col-4 offset-1 btn btn-outline-primary">
<input type="radio" name="type" value="External" autocomplete="off">External
</label>
</div>
</div>
</div>
<div id="employee" class="row justify-content-center">
<div class="form-group col-md-4">
<label for="staff_number">Employee number:</label>
<input type="text" class="form-control" name="staff_number">
<small class="form-text text-muted">example: 7xxxxx</small>
</div>
</div>
<div id="external" class="row justify-content-center">
<div class="form-group col-md-4">
<label for="company_name">Company name:</label>
<input type="text" class="form-control" name="company_name">
<small class="form-text text-muted">Who is this person working for?</small>
</div>
</div>
<div class="row justify-content-center">
<div class="form-group col-md-4 text-center">
<button type="submit" class="btn btn-success">Add user</button>
<a href="{{route('users-list')}}"><button type="button" class="btn btn-dark">Back</button></a>
</div>
</div>
</form>
</div>
Изменить 07/01/2019
Это интересно. Создал простой index.html файл на рабочем столе и вставил этот код в:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<h1>JQuery tests</h1>
<form>
Please choose but one:
<input type="radio" name="portion_selection" value="button_one"/>
...or the other:
<input type="radio" name="portion_selection" value="button_two"/>
<div id="portion_one" style="display:none">
Input the one: <input type="text" name="reference"/>
</div>
<div id="portion_two" style="display:none">
Tell me the other: <input type="text" name="reference"/>
</div>
</form>
<script type="text/javascript">
$("input[name='portion_selection']:radio")
.change(function() {
$("#portion_one").toggle($(this).val() == "button_one");
$("#portion_two").toggle($(this).val() == "button_two"); });
</script>
Это именно то, чего я хотел достичь. Радио кнопки могут быть стилизованы позже, я предполагаю.
Поэтому я вставил тот же код в файл blade и угадайте, что? Переключение снова не работает !!
Мне кажется, я нашел конфликт:
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
Поэтому, когда я комментирую линейные радиостанции Laravel js, они работают и переключают соответствующие секции, но, как и ожидалось, все элементы Laravel Bootstrap, работающие на js, не работают, т.е. Я не могу закрыть оповещения.