Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.07.2017, 01:37
Аспирант
Отправить личное сообщение для Chmil Посмотреть профиль Найти все сообщения от Chmil
 
Регистрация: 07.07.2017
Сообщений: 41

Хочу немного переделать скрипт
Здравствуйте уважаемые, в javascript не силен, поэтому решил обратится к Вам. Имеется простой скрипт, который срабатывает по клике на кнопку, а именно как-бы "разворачивает" содержимое блока. Всего таких блоков 4 и нужно сделать так, что когда разворачиваешь один любой блок, то три остальных заворачиваются обратно. Тоэсть сделать так, чтобы изначально было возможно "развернуть" только один блок.

Вот код скрипта:
$(".uk-more").click(function (e) {
            e.preventDefault();
            var key = $(this).attr('data-target');
            if(key=="content"){
                key = $(this).attr('data-target-content');
                $('#text-preview-'+key).hide();
                $('#full-text-'+key).removeClass("uk-hidden-large");
                $('#full-text-'+key).removeClass("uk-visible-small");
                $('#full-text-'+key).show();
            }else{
                $('.tm-info-'+key).hide();
                $('#carousel-example-generic-'+key).removeClass("uk-hidden-large");
                $('#carousel-example-generic-'+key).removeClass("uk-visible-small");
                $('#carousel-example-generic-'+key).show();
            }
        });


Также предоставляю хтмл код одного из блоков, все 4 почти идентичны (а в части "кнопок" одинаковые):
<section class="tm-top-<?= $key ?> uk-grid" data-uk-grid-match="{target:'> div > .uk-panel'}" data-uk-grid-margin>
                                <div class="uk-width-1-1"><div class="uk-panel widget_widgetkit">
                                        <div class="tm-grid-stack-right"  data-uk-scrollspy="{target:'> div > [data-uk-scrollspy-cls]', delay:0}">
										    <div class="uk-grid uk-text-left uk-flex-middle" data-uk-grid-match data-uk-margin="{cls:'uk-margin-top'}">
                                                <!--<div class="uk-width-medium-2-5 uk-width-small-1-1 uk-text-center uk-float-right uk-flex-order-last-medium uk-invisible"  data-uk-scrollspy-cls="uk-animation-slide-left uk-invisible">-->
												<div class="uk-width-medium-2-5 uk-text-center uk-float-right uk-flex-order-last-medium">
                                                    <img item-id="<?= $item->id ?>_img" style="max-height: 220px;    margin-bottom: 35px;
                                                         margin-top: 35px;" src="<?= $item->photo ?>" class="catalog_image uk-overlay-scale" alt="">        
                                                </div>
                                                <!--<div class="uk-width-medium-3-5 uk-invisible"  data-uk-scrollspy-cls="uk-animation-slide-left uk-invisible">-->
												<div class="uk-width-medium-3-5">
                                                    <div class="uk-panel uk-width-1-1">
                                                        <h3 class="">
                                                            <a class="uk-link-reset" item-id="<?= $item->id ?>_title" href="#"><?= $item->title ?></a>
                                                        </h3>
                                                        <div class="uk-margin" item-id="<?= $item->id ?>_descr">
                                                            <p class="tm-text-medium"><?= $item->main_text ?></p>
                                                        </div>
                                                        <p>
                                                            <?php foreach ($child_pages as $child_item) { ?>
                                                                <a class="uk-button uk-button-large uk-button-secondary" item-id="<?= $child_item->id ?>" group-id="<?= $item->id ?>" href="#"><?= $child_item->name ?></a>
                                                            <?php } ?>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </section>


Спасибо, буду благодарен за любую помощь.
Ответить с цитированием
  #2 (permalink)  
Старый 07.07.2017, 01:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Chmil,
форум поиск открывашка
Ответить с цитированием
  #3 (permalink)  
Старый 08.07.2017, 23:26
Аспирант
Отправить личное сообщение для Chmil Посмотреть профиль Найти все сообщения от Chmil
 
Регистрация: 07.07.2017
Сообщений: 41

рони,
спасибо за совет, искал на форуме по вашему предложению, действительно есть много схожих вариантов реализации того что мне нужно, но увы найти такой, который смог бы применить в моем случаи не смог...((( как я уже упоминал, знания в javascript у меня почти нулевые, а тут нужно переписать функцию, сам без подсказок наверно не справлюсь, помогите пожалуйста решить проблему
Ответить с цитированием
  #4 (permalink)  
Старый 09.07.2017, 02:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Chmil,
не понимаю ваш код, не могу помочь.
Ответить с цитированием
  #5 (permalink)  
Старый 11.07.2017, 12:28
Аспирант
Отправить личное сообщение для Chmil Посмотреть профиль Найти все сообщения от Chmil
 
Регистрация: 07.07.2017
Сообщений: 41

Задачу решил
Большое человеческое СПАСИБО пользователю рони. Предоставил мне рабочий скрипт, сам я б не справился, действительно "Профессор")).
Вот рабочий в моем случаи код, возможно кому-то пригодится, вызывать нужно после вызова jquery.js:
jQuery(function() {
jQuery(".uk-more").click(function(event) {
   event.preventDefault();
   jQuery(".uk-more").not(this).each(function(indx, element){
            var key = jQuery(this).attr('data-target');
            if(key=="content"){
                key = jQuery(this).attr('data-target-content');
                jQuery('#text-preview-'+key).show();
                jQuery('#full-text-'+key).addClass("uk-hidden-large");
                jQuery('#full-text-'+key).addClass("uk-visible-small");
                jQuery('#full-text-'+key).hide();
            }else{
                jQuery('.tm-info-'+key).show();
                jQuery('#carousel-example-generic-'+key).addClass("uk-hidden-large");
                jQuery('#carousel-example-generic-'+key).addClass("uk-visible-small");
                jQuery('#carousel-example-generic-'+key).hide();
            }

      });
})
});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Хочу написать скрипт для прайса Lisenok Общие вопросы Javascript 2 10.04.2016 10:44
скрипт определения положения курсора есть, но немного не работает Александр х@к Элементы интерфейса 2 03.09.2011 16:34
Переделать скрипт ak474797 Общие вопросы Javascript 0 09.06.2011 18:02
Нужно переделать скрипт Ksushan Работа 4 29.05.2011 00:04
Скрипт отображающий время. Помогите переделать с 12 часового формата на 24. Etoneja Общие вопросы Javascript 3 11.02.2011 08:49