0
Я пытаюсь показать раздел div с использованием .slideToggle(), но он не работает.Показать div с помощью jQuery, .toggleSlide не работает?
HTML:
<form>
<a href="#" class="add-sources">Add sources</a>
<!-- Hide until Click -->
<div class="add-sources-interaction" style="display: none;">
<div class="form-group">
<label for="source-1">Sources</label>
<input type="text" name="source-1" class="form-control" placeholder="Source #1" id="source-1">
<input type="text" name="source-2" class="form-control" placeholder="Source #2" id="source-2">
<input type="text" name="source-3" class="form-control" placeholder="Source #3" id="source-3">
</div>
</div>
</form>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
JQuery:
$('.add-sources').click(function(){
$('.add-sources-interaction').slideToggle("fast");
});
Я получаю эту ошибку:
Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3 at bootstrap.min.js:6 at bootstrap.min.js:6
Я использую другой JQuery п в моем приложении, которые, как мне кажется, требуют импортировать версии jQuery.
Я удалил:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
.slideToggle() по-прежнему не работает.
EDIT:
Полные файлы с <script> # 1 и # 3 заменены <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> следуют,
master.blade.php:
<!DOCTYPE html>
<html>
<head>
<title>@yield('title')</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="{{ URL::to('src/css/main.css') }}"> <!--Gets absolute path -->
</head>
<body>
@include('includes.header')
<div class="container">
@yield('content')
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="{{ URL::to('src/js/app.js') }}"></script>
</body>
</html>
dashboard.blade. php:
@extends('layouts.master')
@section('content')
@include('includes.message-block')
<section class="row new-post">
<div class="col-md-6 col-md-offset-3">
<header>
<h3>What do you have to say?</h3>
</header>
<form action="{{ route('post.create') }}" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="title">Title</label>
<input type="text" name="title" class="form-control" placeholder="Your title" id="title">
</div>
<div class="form-group">
<textarea class="form-control" name="body" id="new-post" rows="15" placeholder="Your Post"></textarea>
</div>
<div class="form-group"> <!-- blade if statements which adds bootstrap class 'has-error' if field has error -->
<label for="category">Category</label>
<input class="form-control" type="text" name="category" id="category" placeholder="Categories, separate using comma."> <!-- Request::old fetch old value from form -->
</div>
<div>
<label for="type">Article type</label>
<select name="type" class="form-control" id="type">
<option value="News article">News article</option>
<option value="Opinion">Opinion</option>
</select>
</div>
<div class="form-group">
<label for="image">Upload image</label>
<input type="file" name="image" class="form-control" id="image">
</div>
<a href="#" class="add-sources">Add sources</a>
<!-- Hide until Click -->
<div class="add-sources-interaction" style="display: none;">
<div class="form-group">
<label for="source-1">Sources</label>
<input type="text" name="source-1" class="form-control" placeholder="Source #1" id="source-1">
<input type="text" name="source-2" class="form-control" placeholder="Source #2" id="source-2">
<input type="text" name="source-3" class="form-control" placeholder="Source #3" id="source-3">
</div>
</div>
<br></br>
<button type="submit" class="btn btn-primary">Create Post</button>
<input type="hidden" name="_token" value="{{ csrf_token() }}">
</form>
</div>
</section>
@include('includes.newsfeed')
@endsection
app.js:
var postId = 0;
var postBodyElement = null;
$('.post').find('.interaction').find('.edit').on('click', function(event){
event.preventDefault();
postBodyElement = event.target.parentNode.parentNode.childNodes[1];
var postBody = postBodyElement.textContent; // event is argument passed through, target find .post, childNodes[1] find index 1
postId = event.target.parentNode.parentNode.dataset['postid']; //access data-postid element within dashboard
$('#post-body').val(postBody); //Sets post-body textarea value to var postBody
$('#edit-modal').modal(); // Calls modal function within jQuery
});
$('#modal-save').on('click', function() {
$.ajax({ //ajax function within jQuery, url and token gets specified within the dashboard.blade.php page.
method: 'POST',
url: urlEdit,
data: { body:$('#post-body').val(), postId: postId, _token: token} //Data from textarea
})
.done(function (msg){
$(postBodyElement).text(msg['new_body']); //How is msg and postController return connected?
$('#edit-modal').modal('hide');
});
});
$('.like').on('click', function(event){
event.preventDefault();
postId = event.target.parentNode.parentNode.dataset['postid'];
var isLike = event.target.previousElementSibling == null; //Checks if it's a like or dislike.
$.ajax({
method: 'POST',
url: urlLike,
data: {isLike: isLike, postId: postId, _token: token}
})
.done(function(){
//Change the page when .ajax has men executed.
event.target.innerText = isLike ? event.target.innerText == 'Like' ? 'You like this post' : 'Like' : event.target.innerText == 'Dislike' ? 'You don\'t like this post' : 'Dislike';
//Make sure you can't dislike and like at the same time.
if(isLike){
event.target.nextElementSibling.innerText = 'Dislike';
} else {
event.target.previousElementSibling.innerText = 'Like';
}
});
});
/* Opens subcomment-interaction */
$('.subcomment').click(function(){
$('.subcomment-interaction').show();
});
/* Opens add-sources-interaction */
$('.add-sources').click(function(){
$('.add-sources-interaction').slideToggle("fast");
});
Вы пытаетесь загрузить несколько версий JQuery на одном проекте? (1.12 и 3.1) Потому что это не сработает ... –
Удалить jQuery 1.12 и оставить только 3.1 – Phiter