Как я могу уменьшить ширину li при нажатии на одну из li? - PullRequest
Новая
       18

Как я могу уменьшить ширину li при нажатии на одну из li?

1 голос
/ 08 марта 2012

Я хочу уменьшить ширину Home и About <li> при нажатии на контакт.Возможно ли использовать webkit для этого или просто для java-событий onclick и onfocus?Я пытаюсь понять, что еще в CSS и HTML, если таковые имеются.

<ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
</ul>

1 Ответ

1 голос
/ 08 марта 2012

Есть много способов решить эту проблему, в зависимости от того, какие браузеры вам нужно поддерживать, и если вы хотите использовать JavaScript-фреймворк, чтобы избавиться от некоторых трудностей, хотя и с дополнительными затратами на добавление веса на страницу, включив упомянутую фреймворк.

Здесь представлено не-каркасное решение ( demo 1 ), которое работает в IE9, Firefox и Chrome / Safari с использованием element.addEventListener.Для поддержки

HTML 

<ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
</ul>​

CSS 

li {
    width:100px;
    background-color:lightSkyBlue;
}

li.narrow {
    width:50px;
}

JavaScript 

// resize the list items apart from the one that is clicked
function resizeNotMe() {
    var listItems = document.getElementsByTagName('li');
    for (var i = 0; i < listItems.length; i++) {
        if (listItems[i] !== this) {
            listItems[i].className = 'narrow';
        } else {
            listItems[i].className = '';
        }
    }
}

// create click events on the list items
function load() {
    var listItems = document.getElementsByTagName('li');
    for (var i = 0; i < listItems.length; i++) {
        listItems[i].addEventListener('click', resizeNotMe, false);
    }
}

// run load function when page is loaded
document.addEventListener('DOMContentLoaded', load, false);

Или вы можете использовать более жестко ограниченный подход element.onclick, который будет работать в более (более старых версиях IE) браузерах, но больше не является рекомендуемым подходом, поскольку поведение (события JavaScript) загромождено или не отделено от содержимого (HTML). Разделение интересов - это то, к чему должны стремиться веб-приложения.

demo 2

HTML 

<ul>
    <li onclick="resizeNotMe(this)">Home</li>
    <li onclick="resizeNotMe(this)">About</li>
    <li onclick="resizeNotMe(this)">Contact</li>
</ul>​

CSS

То же, что и в первом решении

JavaScript 

function resizeNotMe(me) {
    var listItems = document.getElementsByTagName('li');
    for (var i = 0; i < listItems.length; i++) {
        if (listItems[i] !== me) {
            listItems[i].className = 'narrow';
        } else {
            listItems[i].className = '';
        }
    }
}

Или выберите платформу JavaScript (например, jQuery ), которая допускает разделениепроблем и предоставляет богатый API для манипулирования DOM и CSS, среди прочего.

демо 3 (мое предпочтение)

HTML

То же, что и первое решение

CSS

То же, что и первое решение

JavaScript 

$('li').on('click', function() {
    $(this).removeClass('narrow').siblings().addClass('narrow');
});

Разница в этой демонстрации заключается в включениибиблиотека jQuery, поэтому вам нужно добавить что-то вроде <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> в ваш код или загрузить jQuery и разместить его самостоятельно.

...